Как работает каскадирование в CSS

«Как работает каскадирование в CSS» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Вероятно, речь о наследовании CSS-свойств. Некоторые свойства (color, font-family, line-height и др.) наследуются от родительских элементов к дочерним, если не переопределены явно.

Пример:

<div style="color: red;">
  <p>Этот текст красный</p>
</div>

Также свойства могут приходить из:

  1. Браузерных стилей по умолчанию (user agent stylesheet)
  2. Глобальных CSS-правил (* {...})
  3. Каскада (более специфичные селекторы)
  4. CSS-переменных (--var-name), которые наследуются

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