Как в CSS прописывать стили

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

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

Как отвечать

Начните со способов подключения и их места: внешний файл (основной вариант), стили в теге <style> (редко, для критичных стилей первого экрана), атрибут style (только для значений, вычисляемых в рантайме).

Дальше о том, как выбираются элементы и что решает конфликт правил:

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

Затем про организацию в проекте, это и есть содержательная часть ответа:

• CSS-модули: имена классов уникальны на сборке, поэтому конфликтов нет вовсе, а специфичность остаётся низкой и одинаковой;
• методология именования вроде БЭМ, если модулей нет;
• утилитарный подход (Tailwind), где стили задаются набором классов;
• токены через переменные CSS: цвета, отступы, радиусы объявляются один раз и меняются в одном месте, а тема переключается переопределением переменных.

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

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

Тушат конфликты !important и получают правило, которое потом нечем перебить.

Пишут длинные селекторы по вложенности, из-за чего компонент нельзя перенести в другое место разметки.

Смешивают в проекте три подхода сразу и теряют предсказуемость.