Каковы причины использования атрибута id для целей CSS?

Я всегда использовал атрибут class, никогда id для выбора и стилизации CSS. Я знаю, что id должен быть уникальным, но это, по-видимому, не является основанием для его использования для CSS.

Единственная причина, по которой я использовал атрибут id, - это обозначение JavaScript и форм.

Я считаю, что смешивание id и class для CSS может вызвать путаницу, и для меня это хороший способ заставить разделение стиля и поведения.

Есть ли веская причина использовать id для целей CSS? Есть ли что-либо, что может быть достигнуто с помощью id, которое невозможно сделать с помощью class?

Комментарии Я нашел полезным/интересным

  • Вы можете сказать то же самое о классах. Там много JavaScript, которые делают (и должны) целевые элементы определенного класса. Изменение класса в этих случаях столь же проблематично с точки зрения поведения. - AaronSieb
  • Идентификаторы имеют различную специфичность в каскаде, чем классы. - Killroy
  • Использование идентификатора для стилизации имеет смысл, если это элемент, который не имеет дубликатов, особенно если он отображается во всех/большинстве страниц - RichN

ОТВЕТЫ

Ответ 1

Основная причина, по которой я использую теги идентификаторов, - это общение с людьми, которые читают мой код. В частности, тег ID позволяет легко ссылаться на любой конкретный элемент, который они хотят, с полным спокойствием, зная, что любые изменения, которые они вносят в него, будут влиять только на один элемент.

РЕДАКТИРОВАТЬ: Существует также более техническая причина использовать теги идентификаторов, которые вы, возможно, не знаете. Я снова обновил этот пост в соответствии с vol7ron comment и некоторыми дальнейшими исследованиями в исторических целях. Эта информация может быть весьма полезной для тех, кто не знаком с CSS.

Следующий контур показывает, как работает каскадный характер каскадных таблиц стилей:

  • Winner = ! важная декларация.
    • Eg. #some-element {color: blue !important;} бьет #some-element {color: red;}.
  • Winner = Встроенный CSS.
    • Например.:
      • <div id="some-element" style="#some-element {color: yellow;}">some content</div> бьется...
      • <style type="text/css">#some-element {color: red;}</style> и...
      • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>.
  • Победитель = наибольший # из идентификаторов.
    • Eg. #some-element#id-2 {color: blue;} бьет #some-element {color: red;}.
  • Winner = Greatest из класса, псевдокласс и других атрибутов.
    • Eg. .some-elements.class-2 {color: blue;} бьет .some-elements {color: red;}.
  • Winner = Наибольшее количество имен элементов и псевдоэлементов в селекторе.
    • Eg. #some-element:hover {color: blue;} бьет #some-element {color: red;}.
  • Победитель = Последний раз прочитал машину.
    • Например.:
      • <style type="text/css">#some-element {color: red;}</style> бьет...
      • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>, потому что внутренний CSS читается после внешнего CSS.

В этой схеме начните с сравнения двух стилей CSS, основанных на верхних критериях контура, то есть "1. Winner = ! important declaration." Если один стиль имеет более высокий приоритет, чем другой в этом аспекте, он выигрывает. Если они одинаковы в этом аспекте, продолжайте до следующих критериев, пока не найдете дифференцирующий фактор.

Ответ 2

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

например:.

  • Верхний и нижний колонтитулы страницы
  • Поле поиска (то, что вы можете увидеть там)
  • Список навигации (что-то вроде вещи справа)

Ответ 3

Выбор чего-либо с уникальным идентификатором выполняется быстрее, чем выбор с помощью класса. Разница незначительна, но в приложениях с огромным количеством элементов DOM или интенсивного приложения Javascript это имеет значение.

Например, если вы используете jQuery, проверьте это: правила производительности jquery

Ответ 4

Нет, но если у вашего элемента есть id, почему бы не использовать его для стилизации?

Вы можете сказать то же самое о именах элементов - с p вы ничего не можете сделать, чего не могли бы сделать с class='paragraph'. Это не значит, что рекомендуется добавить class='paragraph' к каждому элементу <p>.

Ответ 5

Идентификаторы идентифицируют, классы классифицируют. Этот момент упоминался здесь несколько раз, более или менее.

Пример:

<div class="author" id="stephen">[...]</div>

С точки зрения специфичности CSS идентификаторы таргетинга сделают правила CSS более конкретными, чем правила с классами, даже несколько классов.

Таким образом:

p#recent {}

более конкретна, чем

body>p.news.recent {}

и когда пользовательский агент найдет оба из них, первое будет преобладать.

Ответ 6

Вам не нужно использовать идентификаторы. Нет дизайна, который можно создать с помощью идентификаторов, которые вы не можете создать с помощью классов.

С учетом сказанного, использование идентификатора имеет преимущество, заключающееся в четкой маркировке селектора, применительно к одному элементу страницы. Обычно я использую их для стилизации элементов в шаблонах страниц (#Content, #Navigation и т.д.).

В общем, я бы попытался использовать его в областях, которые позволяют мне сделать разметку более краткими. Когда селектор может быть нацелен на тег, вы должны использовать тег. Когда он может быть нацелен на идентификатор, используйте идентификатор. В противном случае используйте класс.

Но, опять же, независимо от того, используете ли вы идентификаторы, это не очень важно.

Ответ 7

Я склонен думать о соотношении id и class в HTML как аналог объектно-ориентированного программирования: a id как экземпляр class.

Я использую классы больше, чем я использую идентификаторы, и часто использую селектора с несколькими классами (например, .film.drama). Но если я хочу идентифицировать определенный элемент, так что я могу применить определенный стиль или поведение, тогда я назначу id, а часто и class. Например.

<ul>
    <li class="film drama">A</li>
    <li class="book drama">B</li>
    <li class="film documentary" id="film-9832">C</li>
</ul>

При назначении идентификатора я думаю: "Разве могло бы быть смысл, чтобы на странице было более одного из них". Если ответ "да", то я, скорее всего, поеду за классом.

В результате, как отмечали @RichN и @AaronSieb, я часто использую id для определенных элементов страницы, которые наверняка будут присутствовать только один раз на странице:

<ul class="sidebar" id="site-meta">[...]</ul>

Ответ 8

Если у вас несколько элементов одного и того же класса, и вам нужно указать другой стиль для одного или нескольких из них, который будет казаться мне действительно действительным.

Ответ 9

Единственное, что я могу придумать для использования идентификатора, - это если у вас есть определенная война - два элемента с одинаковой спецификой. Применение идентификатора придаст вашему элементу более высокую специфичность - +100, чтобы быть точным.

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

ID = 100 (#foo) class= 10 (.bar) element = 1 (div)

Ответ 10

IMO, использование стилей на основе идентификаторов - плохая идея.

Идентификаторы, являющиеся уникальными, должны выполняться только один раз в вашей DOM. Это ограничивает использование любого стиля, связанного с идентификатором, до 1 раза.

С другой стороны, классы CSS могут использоваться несколько раз или вообще не выполняться.

Честно говоря, я думаю, что идентификатор должен использоваться для поведения, а класс должен использоваться для стиля. Тот факт, что вы можете использовать их взаимозаменяемо, является частью того, что делает некоторые аспекты веб-разработки непоследовательными.

Ответ 11

Я использую id, когда знаю, что я буду использовать javascript для этого конкретного элемента. ID намного быстрее, чем классы в javascript.

Ответ 12

Я лично предпочитаю использовать идентификатор для статических элементов страницы (верхние и нижние колонтитулы). Причина - вес страницы.

id = "h" легче, чем class= "h".

Каждый байт считается, на мой взгляд.

Ответ 13

Основная причина, по которой я использую идентификаторы в CSS, - это макет. Если у меня есть один верхний и нижний колонтитул, тогда:

#header
{
...
...
...
}

#footer
{
...
...
...
}

Или одна обертка для моего основного содержимого или одна правая боковая панель. Если кто-то решает, что им нравится мой макет и вы хотите просмотреть источник, его легко увидеть.