CSS: класс и идентификатор взаимозаменяемы?

Question

Я знаю, что другие спрашивали об использовании class и id в файлах CSS, таких как

Div: класс против идентификатора

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

Но это не жесткое правило, не так ли? Какой вред в использовании идентификатора для более чем одного элемента? Или используя класс только для одного? В конце концов, разве «один элемент» - это не просто набор (класс), в котором есть только одна вещь?

Будет ли интерпретатор CSS браузера выдавать ошибку, если я нарушу правила? Я не видел, чтобы это случилось.

Так почему у нас есть и идентификатор, и класс? Почему бы не один или другой и назвать это хорошо?

Answer 1

дубликаты ID не допускаются; хотя ваш браузер может заботиться о нем, а может и не заботиться, это не имеет смысла - как это может быть идентификатором, если есть дубликаты? ; -)

Answer 2

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

Реальный ответ заключается в том, что существует семантическая разница между идентификатором для одного и только одного объекта и идентификатором, который может применяться к нескольким объектам. Хотя вы можете нарушать правила, лучше этого не делать.

Существует также еще одно различие между ними: элемент HTML (X) позволяет применять более одного класса следующим образом:

<div class="foo bar"></div>

Вы не можете сделать это с идентификаторами.

Answer 3

В ответ на вопрос «почему мы используем классы и идентификаторы для CSS, когда вам разрешено иметь один экземпляр класса?», Посмотрите на это так.

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

Но нам нужны идентификаторы для JavaScript. Так почему бы не использовать их и в CSS?

Представьте себе мир, в котором были идентификаторы, но использовались только для JavaScript.

Вы должны будете написать код так:

<div id="wrapper" class="wrapper">
    <div id="nav" class="nav">

    </div>
</div>

и т. Д.

Answer 4

Если у вас есть только один элемент в данном классе, вы не причиняете вреда. Разница в этом случае только семантическая, так как все, что вы делаете, это симуляция идентификатора. Однако, если у вас более одного элемента с одинаковым идентификатором, у вас будут проблемы с проверкой страницы, позиционированием CSS и ссылками Javascript на этот идентификатор. Лучше использовать атрибуты id и class так, как они были задуманы, для максимальной гибкости при оформлении страницы. Помните, у вас может быть элемент с уникальным идентификатором и , если он принадлежит одному или нескольким классам одновременно.

Answer 5

CSS - это не проблема (вы просто определяете там стили), а действительность документа.

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

Помните, что атрибут "id" не предназначен специально для стилевого оформления CSS (по крайней мере, не как класс), а для других вещей, особенно для JavaScript!

Я бы, например, не использовал бы «document.getElementById ()», если бы я не знал, что я собираюсь получить взамен ...

Answer 6

Есть много вещей, чтобы сказать об этом. Вы уже знаете о семантическом значении id класса, поэтому я просто говорю об одном случае - исключая javascript - когда использование идентификатора имеет значение: вы можете ссылаться на элементы с идентификатором, чтобы перемещаться по странице с помощью якорей или из внешних ссылок : вы можете связать определенный элемент HTML-документа с <a href="http://www.site.com/home.html#news>, если вы хотите перейти непосредственно к элементу с id = "news". Очевидно, что вы не можете сделать это с классами, потому что классы не являются уникальными. Поэтому по этой и другим причинам важно иметь атрибут, который идентифицирует элемент внутри документа.

Answer 7

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

Например:

• меню (# menu)
• центральная колонка, в которую вы поместите свой основной контент (#content)
• правый столбец, куда вы помещаете внешние ссылки (# external-links)

Возможно, вам понадобятся очень конкретные правила для этих элементов (точные, не относительные ширина и положение).

Теперь каждый из этих элементов будет содержать несколько экземпляров объекта определенного типа:

• меню будет содержать .menu-items

• центральный будет содержать .articles

• external-links будет содержать .external-link

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

И каждый из этих подэлементов, вероятно, имеет подклассы (например, .featured-article) или даже некоторые из них могут иметь идентификатор (# current-menu-item).

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