Для того, чтобы описать содержимое в структуре HTML/XHTML документа, необходимы определённые возможности. Обычно эту функцию выполняют различные элементы такие как h1, p или ul, но почти всегда стандартного набора тегов не хватает, чтобы обеспечить визуальное разнообразие элементов на странице. Для этих целей мы и используем id и class. Например запись вида <ul id="nav"> даёт нам возможность обратится именно к этому списку. Или же в документе присутствует секция не имеющая соответствующей метки, например нижний колонтитул. Можно обозначить её следующим образом: <div id="footer">.
Id и class — это метки, с помощью которых можно обратится к любому элементу, используя нужные CSS селекторы. Другие языки, например javascript также активно взаимодействует с этими атрибутами. По умолчанию браузеры не имеют никакого значения для id и class.
Так в чём же разница между id и class?
Id
- Элемент может иметь только один
id. - Определённый
idможет присутствовать на странице только один раз.
Class
- Можно применять один и тот класс к разным элементам.
- Элемент может иметь несколько классов.
Применять классы необходимо, если на странице присутствуют элементы, к которым планируется применять одинаковое визуальное форматирование. Например на странице присутствуют несколько статей:
<div class="article"></div> <div class="article"></div> <div class="article"></div>
Теперь можно использовать класс article для применения необходимых стилей ко всем статьям. Если необходимо выделить каким-либо образом определённую статью, можно добавить дополнительный класс:
<div class="article new"></div> <div class="article"></div> <div class="article"></div>
Как вы заметили, нет необходимости создавать другой класс, можно просто дописать дополнительный в атрибуте class.
Особая функция id
Браузеры не обеспечивают никакой дополнительной функциональности от использования классов, однако у id есть одна полезная особенность. Допустим, на странице есть секция с комментариями <div id="comments">. Если где-либо разместить ссылку и в атрибуте href написать http://www.somesite.ru#comments, то при переходе по ссылке браузер автоматически переместиться к секции с id="comments".
Элементы могут иметь оба атрибута
У элемента можно указывать и id и class. Зачастую это может быть очень полезным. Давайте взглянем на стандартный код комментария в Wordpress.
<li id="comment-27299" class="item">Комментарий имеет класс item, который присутствует у всех комментариев и с помощью которого можно оформить их по своему вкусу. Также он имеет уникальный id, что позволяет ссылаться на этот комментарий.
Для CSS нет разницы
Для CSS нет никакой разницы между id и class, кроме того, что id имеет большую специфичность. Всё что можно сделать с id, с одинаковым успехом можно реализовать с помощью class.
Для Javascript разница есть
Для javascript имеет значение, используется ли id или class. Важно например, чтобы на странице был один элемент с определённым id, в противном случае функция getElementById будет работать некорректно. Те, кто знаком с jQuery, знают как легко с помощью этого фреймворка добавлять и удалять классы у элементов. Однако же для id в нём не предусмотрено похожих возможностей.
Если нет необходимости, не используйте их
Как вы заметили, id и class имеют большое значение и мы постоянно используем их для создания необходимого визуального оформления. Однако делать это нужно с умом.
Например следует избегать такого использования:
<a href="http://www.somesite.ru" class="link">Какой-то сайт</a>
Мы уже знаем, что это ссылка, поэтому нет необходимости создавать дополнительный класс link. Можно применить стили к самому тегу a.
Также избегайте следующего:
<div id="right-col">Используя такое значение у id, тяжело понять что содержится в этой секции. В данном случае подходящим значением было бы sidebar или addcontent. Значения этих атрибутов должны передавать информацию о содержимом элемента, а не о визуальных параметрах.
Оригинал: The Difference Between ID and Class
Loading ...
вы там припухли что ли? как это никакой разницы для css нет?
http://www.w3.org/TR/CSS21/cascade.html#specificity
Статья не новая, поэтому стоит добавить, что для классов, как и для идентификаторов, существует специальный метод «getElementsByClassName», который входит в стандарт DOM3 и будет поддерживаться всеми современными браузерами, на данный момент работает в Firefox 3+, Opera 9.5+, Safari 3.1+, Google Chrome. Сделать эмуляцию данного метода для старых браузеров не составляет труда.
Как это для CSS нет разницы? А приоритеты стилей?
Для CSS разница между Id и class тоже есть – id имеет больший приоритет
Пардон, уточнил в статье про приоритет id. В оригинале имелось ввиду, что для применения стилей разницы нет.
Мне кажется лучше всегда использовать классы, тогда легче подключать скрипты и легче делать вносить изменения, скажем если вдруг нужно один и тот же элемент продублировать несколько раз.
[...] Разница между id и class Для того, чтобы описать содержимое в структуре HTML/XHTML документа, необходимы определённые возможности. Обычно эту функцию выполняют различные элементы такие как h1, p или ul, но почти всегда стандартного набора тегов не хватает, чтобы обеспечить визуальное разнообразие элементов на странице. Для этих целей мы и используем id и class. Например запись вида ul id=”nav” даёт нам возможность обратиться именно к этому списку. Или же в документе присутствует секция не имеющая соответствующей метки, например нижний колонтитул… [...]
При прочих равных условиях, создание документа с class обходится меньшей кровью, чем с id (в общем случае, от 2 до 10% выигрыша). Если принять во внимание, что element.class-селекторы отрабатывают быстрее, чем #id на те же 10%, то общий выигрыш при использовании в документе классов перед идентификаторами составит порядка 15%. В абсолютном значении эти цифры не так велики: для Centrino Duo 1.7 получается цифра примерно в 0,0085мс на 1 идентификатор (в среднем, 3 CSS-правила и 1 употребление).
Для документа со 100 элементами выигрыш может составить почти 1мс, для документа с 1000 — 8,5мс! Средняя страница в интернете имеет 500–1000 элементов (проверить, сколько элементов на странице, можно просто запустив javascript:alert(document.getElementsByTagName(‘*’).length) в адресной строке браузера на какой-либо открытой странице), поэтому это уже то, за что можно побороться.
Однако, значительную нагрузку составляет именно создание DOM-дерева в документе (можно посмотреть, как экспоненциально растет время для Opera, Firefox и Safari) и самого документа (постоянное время в 60мс для IE, которое превосходит все остальные накладные расходы при создании среднего документа). В целом, эти операции уходит от 70% всего времени (т.е. наибольшая экономия достигается за счет минимизации размера дерева и количество HTML-страниц, загружаемых, например, во фрейме, в этой области планируется провести дополнительные исследования).
На скорость вычисления одного элемента по идентификатору, как ни странно, наибольшее влияние оказывает опять-таки DOM-Дерево, чем количество таких элементов. Даже при 1000 элементов с id более половины временных издержек можно урезать, если просто сократить общее число элементов (особенно хорошо это заметно для IE).
В целом же, основных советов два: уменьшайте DOM-дерево и используйте id только в случае действительной необходимости.
Сергей, благодарю за столь подробный комментарий. Можно ли где-нибудь ознакомиться с более подобрыми исследованиями. Припоминаю, что на Хабрахабр была статья, где говорилось, что скорость обработки зависит стилей также от типа селектора, т.е кол-ва и типа составляющих. К сожалению ссылку не сохранил.