Пошук уроків, статей та іншого контенту
Як браузер вирішує, яке з кількох конкурентних правил CSS застосувати до елемента.
p { color: black; } /* за тегом */
.highlight { color: orange; } /* за класом */
#header { background: white; } /* за id */
article > p { margin: 0; } /* прямий нащадок */
a:hover { text-decoration: underline; } /* псевдоклас — стан */Коли кілька правил CSS застосовуються до того самого елемента з конфліктними значеннями тієї самої властивості, браузер має визначений порядок вирішення конфлікту — саме це «каскадування» і дало назву мові стилів. Порядок визначають три фактори: специфічність селектора, порядок оголошення в коді (пізніше оголошене перемагає при однаковій специфічності) і важливість (!important).
Специфічність обчислюється за типом селектора: id-селектор важливіший за клас, клас важливіший за тег. Комбінація селекторів підсумовує специфічність кожної частини:
p { color: black; } /* специфічність: 0-0-1 (один тег) */
.text { color: blue; } /* специфічність: 0-1-0 (один клас) — переможе над тегом */
#main p.text { color: green; } /* специфічність: 1-1-1 — переможе над обома вище */!important перебиває звичайну специфічність повністю — зручно як швидкий хак, але систематичне використання !important робить каскад непередбачуваним: наступне правило, що має справді перемогти, теж вимагає !important, і конфлікти стає дедалі важче розплутувати. Практика — уникати !important, окрім рідкісних, свідомих винятків (наприклад, утилітарні класи бібліотек на кшталт Tailwind).
Не всі властивості CSS успадковуються від батьківського елемента до дочірніх автоматично — типографічні властивості (color, font-family, font-size) типово успадковуються; властивості блокового розташування (margin, padding, border, background) — ні:
body {
color: #333; /* успадкується всіма нащадками, якщо не перевизначено */
font-family: sans-serif;
}
.card {
border: 1px solid #ccc; /* НЕ успадковується — потрібно задавати кожному елементу окремо */
}Нарощувати специфічність селекторів (#page .content .card p.text) замість перегляду структури стилів — робить майбутні перевизначення дедалі складнішими, вимагаючи ще вищої специфічності.
!important як типовий спосіб «перемогти» конфлікт замість розуміння причини конфлікту специфічності — накопичується й ускладнює підтримку стилів з часом.
Очікувати, що border/padding/background успадковуються від батьківського елемента так само, як color/font-family, — потрібна явна перевірка, які саме властивості успадковуються, а не універсальне припущення.
Каскад визначає, яке з конкуруючих правил CSS застосовується — за специфічністю селектора (id > клас > тег), потім за порядком оголошення. Типографічні властивості успадковуються дочірніми елементами автоматично, властивості розташування (margin, padding, border) — ні. !important перебиває звичайну специфічність повністю й вартий уникання як типової практики.