
Не используйте #ID в CSS
Используйте ID по прямому назначению: для идентификации элементов. Для полей ввода, якорных ссылок или яваскрипта. Стили через #id не назначайте.
Используйте ID по прямому назначению: для идентификации элементов. Для полей ввода, якорных ссылок или яваскрипта. Стили через #id не назначайте.
Содержание
Почему нет
ID — уникальное значение, оно может быть на странице одно. Стили нельзя использовать повторно, что ухудшает масштабируемость проекта. А это идёт вразрез самой логике визуализации объектов.
На курсе html и css — это обязательное правило. Мы на практике разбираем более удобные форматы стилизации. Учимся писать гибкие, легко настраиваемые стили, с логичными переопределениями, которые не порождают конфликты.
Проблема 1: у #id высокий приоритет
У сайта есть шапка, внешний вид которой описан через #id. Шапка на сайте одна и проблемы вроде нет. Но, появляется задача внести изменение: во всех разделах оставить её синей, а в «Новостях» сделать жёлтой. И вот #id нам ставит первую подножку.
У атрибута .class
приоритет ниже #id
.
— Ха, я использую !important
, — Выкрикнул самодовольных мальчишка и решил задачу.
Пускай порадуется.
Проблема 2: #id проявится там, где вы не хотели
У нас есть блок с текстом, внизу которого нужно добавить социальные кнопки. Такие же кнопки есть в сайдбаре. Ничего нового делать не нужно, скопировать и вставить.
Выполняем и получаем под дых. При наведении ситуация усугубляется.
— Ха, я использую !important
, — Выкрикнул самодовольных мальчишка и решил проблему, как и в предыдущий раз.
Попробуйте исправить и вы, редактируя только код кнопок во вкладке «CSS».
Вместо того, чтобы заменить идентификаторы на классы и жить в гармонии, мы превращаем стили в неповоротливого монстра, нашпигованного !important
'ами.
А если очень надо
Когда без ID никак, обратитесь к элементу, напрямую прописав атрибут: [id="id_name"]
. У такой записи низкий вес.
Но она выглядит костыльно и служит напоминанием: присваивать стили через ID — плохое решение.