Почему не стоит использовать обращение по id в CSS и какие есть нюансы?

Что проверяют

Понимаете ли вы специфичность селекторов и можете ли обосновать соглашение, а не повторить запрет из гайда. Хороший ответ всегда содержит оговорку: это договорённость команды, а не правило языка.

Как отвечать

Специфичность считается по группам: инлайновый стиль, затем идентификаторы, затем классы, атрибуты и псевдоклассы, затем теги. Один #id перебивает любое количество классов, поэтому переопределить такое правило можно только другим идентификатором или через !important. Класс же переопределяется порядком объявления, это дешевле и предсказуемее.

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

Третье: id обычно занят другими задачами. Это якорь в адресе, связь label с полем через for, цель для aria-labelledby, точка входа для скрипта. Если на нём висят ещё и стили, переименование задевает сразу несколько мест.

Нюансы, которые стоит назвать самому:

• :where(#id) обнуляет вес селектора, если селектор нужен, а его сила мешает;
• каскадные слои @layer дают управляемый порядок и снимают часть гонки за весом;
• в JavaScript обращение по идентификатору наоборот нормально, getElementById быстр и однозначен;
• в письмах и на маленьких статических страницах запрет смысла не имеет.

Где спотыкаются

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

Лечат конфликт весов через !important. Он выигрывает у обычных объявлений, и следующая правка потребует ещё одного, а потом ещё. Правильный путь противоположный: понижать вес селектора, а не повышать.

Забывают, что повторённый в разметке идентификатор ошибку не вызывает. Стиль применится ко всем таким элементам, getElementById вернёт первый, label начнёт указывать не туда, и баг найдётся разве что валидатором.