Использовать селектор CSS или напрямую ID?

Question

это более концептуальный вопрос. Недавно я почувствовал себя более уверенно с этим видом HTML (пример)

<div id="mainCont">
  <div id="mainContFirst">Text <span id="mainContFirstSpan">option</span></div>
  <div id="mainContSecond">Other Text</div>
</div>

Имея все важные теги, помеченные идентификатором, вы можете легко записать css:

#mainContFirst {} etc

это плохая практика? Должен ли я использовать только селектор CSS? Это быстрее, чем использовать селектор?

Спасибо

Группировка (редактировать)

Хорошо, а как насчет элементов, которые должны иметь одинаковый стиль?

скажем, например, в каждом делении второй <span> должен иметь font-size:10px; лучше это:

<div>
   text text <span></span> <span id="firstDivSpan"></span>
</div>
 <div>
   text text <span></span> <span id="secondDivSpan"></span>
</div>

и затем css:

#firstDivSpan, #secondDivSpan {...}

Или вот так?

 <div>
   text text <span></span> <span id="firstDivSpan" class="commonStyle"></span>
</div>
 <div>
   text text <span></span> <span id="secondDivSpan" class="commonStyle"></span>
</div>

.commonStyle{...}

Что лучше?

Answer 1

ID селекторы самые быстрые.Это совсем не плохая практика;вы просто действуете исходя из предположения, что на ваших страницах будет только один элемент с этим идентификатором.

При этом вы не должны злоупотреблять идентификаторами по неубедительным причинам, таким как производительность рендеринга.Используйте идентификаторы для маркировки действительно уникальных элементов, а не для маркировки всего, чтобы вы могли забыть о таких вещах, как комбинаторы-потомки, классы, группы и т. Д. Именно эти другие селекторы делают CSS такими мощными, а не только селекторы идентификаторов.

Отредактируйте вопрос: в этом случае нет лучше .Помимо проблем с производительностью (поскольку они вообще не имеют значения ), это во многом зависит от значения селекторов.

Если ваши стили применяются к любому элементу с.commonStyle class затем используйте селектор класса.Если вы хотите настроить таргетинг только на эти два конкретных span независимо от класса, тогда селекторы идентификаторов являются более подходящими.

Answer 2

Лучше использовать идентификатор, как в вашем примере.Браузеру легче извлечь определенный элемент идентификатора, чем найти всех родителей, а затем потомков ...

Когда кто-то расширил мой ответ в отдельной теме, статья об этом: http://www.css -101.org / потомок-селектор / go_fetch_yourself.php

ID, класс, имя элемента - все они являются селекторами CSS.