Коротко: id — уникальный идентификатор элемента (один на страницу), class — «ярлык», который можно повторять у множества элементов. В CSS стили по классу (`.card`) предпочтительнее; id (#header) используют для якорей, связок label и точечных исключений.
Сравнение
| Свойство | id |
class |
|---|---|---|
| Уникальность | один на страницу | можно повторять |
| Переиспользование | нет | да |
| Специфичность в CSS | высокая (#id) | средняя (.class) |
| Запись в HTML | id="header" |
class="card" |
| Запись в CSS | #header |
.card |
Вкладки: разбор
/* класс — можно применить к десяткам элементов */
.card { padding: 16px; border-radius: 8px; }
/* id — стиль только для одного элемента */
#site-header { position: sticky; top: 0; }Классы — «строительные блоки» стилей. Стиль по id трудно переиспользовать: второй такой элемент уже получит дубликат идентификатора, а это ошибка.
Порядок приоритета селекторов (от слабого к сильному):
- тег (
p); - класс, атрибут, псевдокласс (
.card,[href],:hover); id(#main);- инлайн-стиль (
style="...").
Чем выше специфичность, тем труднее переопределить стиль позже. Стили по id часто приводят к «войне» и !important.
// уникальный элемент — удобно по id
document.getElementById('cart-count');
// группу элементов — по классу
document.querySelectorAll('.card');В JS выбор по id быстрее требует отсутствия дублей. Для множества элементов — классы.
Где id действительно уместен:
- якоря для ссылок (
href="#faq"); - связка
labelи поля ввода (for="email"); - подписи через
aria-labelledby; - единственные контейнеры (например,
#content); - целевой элемент формы или скрипта.
Для стилей всё же используйте классы: они гибче и не «задирают» специфичность.
id двум элементам, браузер выполнит разметку, но HTML станет некорректным: якоря будут «прыгать» не туда, а getElementById вернёт только первый элемент.Практика: правильный выбор
- Нужен стиль для многих элементов — класс.
- Нужен якорь или связка label — id.
- Не пишите CSS по id без необходимости.
- Уникальность id проверяйте в валидаторе или DevTools.
- Для «состояний» используйте классы (
.is-active), задаваемые скриптом. - Держите классы говорящими:
.card--large, а не.big1.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стиль не переопределяется | правило по id | переписать на класс |
| Якорь ведёт не туда | дубли id | сделать id уникальными |
| Копия блока выглядит иначе | id нельзя повторить | использовать классы |
| Нужен !important | высокая специфичность | снизить её классами |
Проверьте себя
#main или .main?
Вопросы и ответы
Можно, но осторожно. Если элемент единственный и стиль не нужно переиспользовать — иногда это оправдано. Но чаще класс гибче.
Разница в скорости на практике незаметна. Выбирайте по удобству и поддерживаемости, а не по «микрооптимизации».
Сколько угодно, но практично держать 1–3: базовый класс и модификаторы.
Через id поля и for у label. Здесь id не только уместен, но и необходим для доступности.
Итоги
id— один на страницу,class— сколько угодно повторов.- Стили пишите классами: id повышает специфичность и мешает.
- id нужен для якорей, связок label/input и ARIA.
- Дубли id — ошибка разметки.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.