Не используйте #ID в CSS

Используйте ID по прямому назначению: для идентификации элементов. Для полей ввода, якорных ссылок или яваскрипта. Стили через #id не назначайте.

Почему нет

ID — уникальное значение, оно может быть на странице одно. Стили нельзя использовать повторно, что ухудшает масштабируемость проекта. А это идёт вразрез самой логике визуализации объектов.

На курсе html и css — это обязательное правило. Мы на практике разбираем более удобные форматы стилизации. Учимся писать гибкие, легко настраиваемые стили, с логичными переопределениями, которые не порождают конфликты.

Проблема 1: у #id высокий приоритет

У сайта есть шапка, внешний вид которой описан через #id. Шапка на сайте одна и проблемы вроде нет. Но, появляется задача внести изменение: во всех разделах оставить её синей, а в «Новостях» сделать жёлтой. И вот #id нам ставит первую подножку.

У атрибута .class приоритет ниже #id.

— Ха, я использую !important, — Выкрикнул самодовольных мальчишка и решил задачу.

Пускай порадуется.

Проблема 2: #id проявится там, где вы не хотели

У нас есть блок с текстом, внизу которого нужно добавить социальные кнопки. Такие же кнопки есть в сайдбаре. Ничего нового делать не нужно, скопировать и вставить.

Выполняем и получаем под дых. При наведении ситуация усугубляется.

— Ха, я использую !important, — Выкрикнул самодовольных мальчишка и решил проблему, как и в предыдущий раз.

Попробуйте исправить и вы, редактируя только код кнопок во вкладке «CSS».

Вместо того, чтобы заменить идентификаторы на классы и жить в гармонии, мы превращаем стили в неповоротливого монстра, нашпигованного !important'ами.

А если очень надо

Когда без ID никак, обратитесь к элементу, напрямую прописав атрибут: [id="id_name"]. У такой записи низкий вес.

Но она выглядит костыльно и служит напоминанием: присваивать стили через ID — плохое решение.