Часто возникает соблазн использовать атрибут id как селектор для стилизации элементов в ЦСС, например:

<div id="container"></div>
#container {
  max-width: 1000px;
  margin: 0 auto;
}

Так делать не стоит по нескольким причинам:

  1. По стандарту ХТМЛ, айди должен встречаться только один раз на страницу. Иногда это трудно проконтролировать — вы можете просто не учесть, что на самом деле элемент будет использоваться несколько раз.

  2. Айди имеет самую высокую специфичность после инлайновых стилей, поэтому его трудно переопределить при каскадировании правил.

Я придумал тупое правило — классы для стилей, айди для Яваскрипта. Это удобно — одного взгляда на код достаточно, чтобы понять, какие элементы интерактивные (с айди), а какие — нет.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

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

Комментарии

Если следовать совету, сложность контроля использования id никуда не исчезает.

4 фев 2021

id нужны в двух случаях:

  1. Для навигации по странице через # в строке браузера;

  2. Для привязки label‑ов к соответствующим элементам формы.

Для классов, к которым цепляются стили можно использовать специальный префикс, типа js‑. И не вешать на js‑классы стили.

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

4 фев 2021

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