В ЦСС стилизация по атрибуту айди обычно противопоставляется стилизации по классу:
<div id="product"></div>
#product {
border-radius: 3px;
}
<div class="product"></div>
.product {
border-radius: 3px;
}
Стилизация по айди считается плохим решением по многим причинам.
Ограничивает переиспользование и композицию
По стандарту ХТМЛ, на странице не должно быть элементов с одинаковым айди и у элемента может быть только один айди. Это сразу ограничивает возможности, не даёт переиспользовать и комбинировать стили, в итоге приводит к повторам и разрастанию кода.
<div id="product is__favorite is__promo"></div>
<div id="product is__promo"></div>
<div id="product is__promo"></div>
<div id="product"></div>
<div class="product is__favorite is__promo"></div>
<div class="product is__promo"></div>
<div class="product is__promo"></div>
<div class="product"></div>
<div id="product1"></div>
<div id="product2"></div>
<div id="product3"></div>
<div id="product4"></div>
#product1,
#product2,
#product3,
#product4 {
/* … */
}
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
.product {
/* … */
}
Плохо дружит с классами
Из‑за ограничений по уникальности, сложно обойтись только айди при вёрстке. На странице обычно есть повторяющиеся элементы, для стилизации которых потребуются классы. Сочетание айди и классов создаёт новые проблемы.
У стилей по айди высокая специфичность, «вес» стилей. При прочих равных, они перебьют почти все другие стили, в том числе и стили классов. В примере с айди цвет не изменится, потому что вес класса ниже и он не перебьёт айди:
<div id="label" class="is__promo">Свежак</div>
#label {
color: black;
}
.is__promo {
color: red;
}
<div class="label is__promo">Свежак</div>
.label {
color: black;
}
.is__promo {
color: red;
}
Проблемы специфичности, когда стили неправильно дополняют или переопределяют друг друга, сложно расследовать и чинить без костылей.
Делает код неоднородным
Айди и классы вперемешку делают код неоднородным и непредсказуемым, одинаковая задача в разных местах решается по‑разному. Нужно тратить внимание, принимать решение по каждому элементу: стилизовать ли по айди или по классу. Появляется шанс ошибиться в решении и потратить время на переписывание.
Изначально инструмент не для стилизации
Изначальное назначение айди — быть якорем, на который можно сослаться, например, для вёрстки содержания страницы. Клик по ссылке с якорем прокрутит страницу к элементу с указанным айди.
<div>
<a href="#no_reuse">Ограничивает переиспользование и композицию</a>
<a href="#bad_with_classes">Плохо дружит с классами</a>
<a href="#messy_code">Делает код неоднородным</a>
<a href="#wrong_tool">Изначально инструмент не для стилизации</a>
</div>
<h2 id="no_reuse">…</h2>
…
<h2 id="bad_with_classes">…</h2>
…
<h2 id="messy_code">…</h2>
…
<h2 id="wrong_tool">…</h2>
…
То, что к айди технически возможно привязать стили, не значит, что это нужно делать.
Стилизация по айди создаёт риски и вопросы на ровном месте, не давая ничего взамен. Потому и считается плохим решением.
Тупое правило: выбирая между айди и классами, всегда используйте классы. Это универсальный и общепринятый способ стилизации элементов.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.