Що таке каскад у CSS

Каскад (Cascading) — це основний механізм, який визначає, який стиль буде застосовано, коли декілька CSS правил націлені на один і той же елемент.

CSS означає Каскадні таблиці стилів — cascading style sheets. Слово "каскадний" вказує на те, що стилі накладаються один на одного і застосовуються відповідно до певних правил пріоритету.

Що впливає на вибір стилю?

Коли до одного елемента застосовуються декілька CSS правил, браузер вибирає те, яке має найвищий пріоритет. Це враховує:

Специфічність

Наскільки "точно" CSS правило націлене на елемент. Вища специфічність означає вищий пріоритет.

css

div a        /* низька специфічність */
.menu a      /* вища */
#header a    /* ще вища */

Важливість (!important)

Якщо до пропси додано !important, це перезаписує навіть більш специфічні правила.

css

p { color: red !important; }

Джерело стилю

Джерело стилю:

Стилі користувача (в браузері)
Інлайн стилі (style="...")
Зовнішні таблиці стилів (<link> / @import)
Стилі за замовчуванням (стилі користувача-агента)

Порядок джерела

Якщо специфічність однакова, стиль, який йде останнім у коді, виграє. Рекомендація:

Уникайте надмірного використання !important — це ускладнює підтримку коду та налагодження.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Що таке каскад у CSS

#Що впливає на вибір стилю?

#Специфічність

#Важливість (!important)

#Джерело стилю