Hack Frontend Community

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

Каскад (Cascading) — это основной механизм, определяющий, какой стиль будет применён, если на один и тот же элемент приходят несколько CSS-правил.

CSS расшифровывается как Cascading Style Sheets — каскадные таблицы стилей. Слово "каскадные" указывает на то, что стили накладываются друг на друга и применяются по определённым правилам приоритетности.

Что влияет на выбор стиля?

Если к одному элементу применяются несколько CSS-правил, браузер выбирает то, которое имеет наибольший приоритет. При этом учитываются:

1

Специфичность (Specificity)

Насколько «точно» CSS-правило указывает на элемент. Чем выше специфичность, тем выше приоритет.

div a        /* низкая специфичность */
.menu a      /* выше */
#header a    /* ещё выше */
2

Важность (!important)

Если к свойству добавлен !important, оно переписывает даже более специфичные правила.

p { color: red !important; }
3

Источник стилей

Источник, откуда пришёл стиль:

  • Пользовательские стили (в браузере)
  • Встроенные стили (style="...")
  • Внешние таблицы стилей (<link> / @import)
  • Стили по умолчанию (user-agent styles)
  • При равной специфичности и отсутствии !important, побеждает стиль, определённый последним в коде.
4

Порядок подключения

Если два правила абсолютно равны по специфичности и важности, применяется последнее по порядку.

Пример: как работает каскад

<p class="text" id="paragraph" style="color: green;">Hack Frontend</p>

p {
  color: red;
}

.text {
  color: blue;
}

#paragraph {
  color: orange;
}

p {
  color: black !important;
}

Что применится?

  • color: black — у него !important → максимальный приоритет.

  • Без !important сработал бы style="color: green;", потому что инлайн-стиль имеет более высокий приоритет, чем селекторы в CSS.

Таблица приоритетов (по убыванию)

ПравилоПриоритет
!important🔥 Высший
inline-стили style="..."Очень высокий
ID селекторы (#id)Высокий
Классы, псевдоклассы (.class)Средний
Теги (div, p)Низкий
Стили по умолчанию браузераСамый низкий

Итог

  • Каскад — это то, как CSS решает, какое свойство применить, когда конфликтуют стили.
  • Основные факторы: специфичность, !important, источник и порядок.
  • Понимание каскада помогает избегать конфликтов в стилях и писать чистый и предсказуемый CSS.

Важно:

Частое использование !important — это признак плохой структуры CSS. Используйте каскад и специфичность правильно.