Школа
Веб-разработка

Почему не стоит использовать атрибут id для стилизации элементов

4 фев 2021
👁 4917   🗩2
Веб-разработка

Почему не стоит использовать атрибут id для стилизации элементов

4 фев 2021
👁 4917   🗩2
Юрий Мазурский
Разработчик и дизайнер
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

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

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

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

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

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

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

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

Веб‑разработка
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Aleksey Elyseev

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

Алексей Самохин

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

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

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

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

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

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

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