Каскад CSS — что это такое во frontend-разработке

Коротко

Алгоритм, по которому браузер выбирает одно итоговое значение свойства, когда к элементу подходит несколько противоречащих друг другу CSS-правил.

Что такое «Каскад CSS»

Слово cascade стоит в самом названии языка — Cascading Style Sheets. Конфликты стилей неизбежны: тема задаёт цвет ссылок, плагин — свой, в шаблоне компонента есть третий, а у браузера четвёртый по умолчанию. Каскад — набор правил, по которым из всех подходящих деклараций остаётся одна. Когда стиль «не применяется», почти всегда причина в том, что каскад выиграло другое правило.

Критерии по порядку

Браузер сравнивает конфликтующие декларации по критериям сверху вниз и останавливается на первом, где нашлась разница:

Источник и важность. Стили браузера, пользователя или автора, с !important или без; подробно — в статье «Источник каскада».
Контекст. Стили внутри Shadow DOM и снаружи него соревнуются по отдельным правилам.
Атрибут style. Встроенные в элемент стили побеждают правила из таблиц стилей.
Слои. Правила из разных @layer сравниваются по порядку слоёв; обычные стили вне слоёв сильнее любого слоя.
Специфичность. #id сильнее .class, класс сильнее тега.
Порядок. При равенстве всего остального побеждает объявленное позже.

Разбор конфликта

/* style.css темы */
.header .menu a { color: #333; }           /* 0-2-1 */

/* custom.css, подключён позже */
.menu-link { color: #c00; }                /* 0-1-0 — проиграет */
.menu .menu-link { color: #c00; }          /* 0-2-0 — тоже проиграет */
.header .menu .menu-link { color: #c00; }  /* 0-3-0 — победит */

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

Как найти победителя

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