В ЦСС стилизация по атрибуту айди обычно противопоставляется стилизации по классу:

Айди
<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы