Почему CSS называется каскадной таблицей стилей?

«Почему CSS называется каскадной таблицей стилей?» — вопрос из категории Веб-тестирование, который задают на 10% собеседований QA Тестировщик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Название отражает два фундаментальных принципа работы CSS.

1. Каскадность (Cascading): Стили применяются по правилам приоритета, которые определяют, какое правило «перекроет» другое, подобно потокам в каскаде. Приоритет вычисляется на основе:

  • Источника и важности: !important > стили автора (авторские стили) > стили пользователя > стили браузера (user agent).
  • Специфичности селектора: Вес селектора рассчитывается по формуле (inline, ID, классы/псевдоклассы, элементы/псевдоэлементы). Например, #id > .class > tag.
  • Порядка следования: При равной специфичности и важности применяется последнее объявленное правило.

Пример каскада:

/* Правило 1: Специфичность низкая (001) */
p { color: black; }

/* Правило 2: Специфичность выше (010) */
.text { color: blue; }

/* Правило 3: Специфичность самая высокая (100) и применяется последним */
#unique { color: red; }

Для элемента <p id="unique" class="text"> цвет текста будет красным.

2. Таблицы стилей (Style Sheets): CSS представляет собой набор правил (таблицу), где каждое правило связывает селектор (указывает на элементы HTML) с блоком объявлений (описывает их визуальное оформление).