Что такое каскад в CSS

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

Знаете ли вы полный алгоритм, по которому браузер выбирает одно значение свойства из нескольких конкурирующих, или только слово «специфичность». Почти всегда уточняют, где в этой цепочке стоят !important, инлайн-стили и @layer, и чем каскад отличается от наследования.

Как отвечать

Каскад это алгоритм разрешения конфликтов: если к элементу подходят несколько объявлений одного свойства, выигрывает одно. Критерии проверяются по порядку, следующий включается только при равенстве на предыдущем:

• происхождение и важность: стили браузера, пользователя и автора. Для обычных объявлений автор сильнее браузера, для !important порядок переворачивается. Активная transition перебивает даже !important;
• контекст: при конфликте Shadow DOM и внешнего документа обычные объявления снаружи сильнее, а !important сильнее внутри теневого дерева;
• атрибут style: инлайн-стиль сильнее любого селектора, но проигрывает !important из таблицы стилей;
• каскадные слои: @layer задаёт порядок, позже объявленный слой сильнее. Стили вне слоёв сильнее любого слоя, а для !important порядок снова обратный;
• специфичность: тройка (ID; классы, атрибуты и псевдоклассы; теги и псевдоэлементы), сравнивается по разрядам;
• порядок появления: при прочих равных побеждает последнее объявление.

Из современного: :where() обнуляет специфичность, а :is(), :not() и :has() берут специфичность самого сильного аргумента. Вместе с @layer это позволяет подключить сброс стилей и библиотеку компонентов так, чтобы свой код их гарантированно перебивал без !important.

Наследование срабатывает, когда каскад не дал значения: наследуемые свойства вроде color и font-family берутся у родителя, остальные получают начальное значение.

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

Считают специфичность одним числом. Одиннадцать классов не перебьют один ID, разряды не переполняются.

Думают, что <style> в документе сильнее подключённого файла. У них одно происхождение, решает только порядок в документе.

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