Что такое приоритеты в CSS

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

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

Как отвечать

Разложите по шагам, в каком порядке браузер выбирает значение. Сначала важность и происхождение (стили страницы, пользователя, браузера, причём для правил с !important порядок происхождений переворачивается), затем слои каскада, затем специфичность, и только при полном равенстве побеждает объявленное позже.

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

@layer base, theme;
@layer base { .btn { color: blue } }
@layer theme { .btn { color: red } }  /* победит: слой объявлен позже */
:where(.card) .btn { color: teal }    /* специфичность 0,0,0 */
:is(#app, .card) .btn { color: gold } /* считается по самому сильному аргументу */

Назовите инструменты понижения веса: :where() для библиотечных стилей, слои для разделения базы и темы, отдельный класс вместо длинной цепочки селекторов.

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

Складывают специфичность в одно число и ждут, что десяток классов перебьёт идентификатор. Разряды не переносятся, сравнение идёт слева направо, и первый же разряд решает исход.

Гасят конфликт флагом важности, следующий разработчик ставит свой, и каскад превращается в соревнование, из которого нет выхода. Дешевле снизить вес чужого правила слоем или обёрткой :where(), чем поднимать вес своего.

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