Каскад стилів

Каскад стилів має стосунок до процесу визначення та застосування стилів до елементів на веб-сторінці. Коли браузер рендерить сторінку, він використовує каскадні стилі для визначення, які стилі застосовуються до кожного елемента, і в якому порядку.

У CSS-файлі може бути кілька властивостей стилю, які стосуються якогось елемента. Якщо вони відрізняються, то в результаті вони комбінуються. А якщо це одна і та ж властивість, але з різними значеннями, то виникає конфлікт.

Браузеру якраз і потрібно правильно визначити пріоритетність застосування того чи іншого стилю. Розглянемо такий приклад.

<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>

p {
   color: white;
}

.text {
   background-color: green;
}

У такому випадку фінальний стиль до тексту застосується такий: білий текст на зеленому фоні.

Розглянемо наступний приклад.

p {
   color: blue;
}

.text {
   color: green;
}

Тепер у нас два селектори мають різні значення однієї й тієї ж властивості.

Щоб браузер міг правильно визначити фінальний стиль він використовує два механізми: специфічність і наслідування.

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

Вага специфічності (Specificity): Якщо один елемент має декілька правил, браузер вибирає правило з більшою вагою специфічності. Тобто тут працює елементарна математика - браузер рахує специфічність кожного селектора і де вона буде більшою, той селектор і перемагає.

Існує чотири ранги специфічності.

Браузер перевіряє селектори 1 рангу й обирає той, де число більше. Якщо вони однакові, то браузер переходить до порівняння селекторів 2 рангу. І так далі аж до 4 рангу.

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

Селектори 4 рангу

До селекторів 4 рангу належать селектори елементів та псевдоелементів. Кожен селектор елементів та псевдоелементів додає одиницю до четвертого рангу.

<article>
   <h1>Lorem ipsum dolor sit amet.</h1>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

// специфічність цього селектора 0 0 0 1
p {
   color: white;
}

// специфічність цього селектора 0 0 0 2
article > p {
  color: yellow;
}

Селектори 3 рангу

Кожен селектор класу, атрибута і псевдокласу додає одиницю до третього рангу специфічності.

<article class="article">
<h1 class="article-title">Lorem ipsum dolor sit amet.</h1>
<p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

// специфічність цього селектора 0 0 1 0
.article-title {
  color: green;
}

// специфічність цього селектора 0 0 1 1
.article > p {
  color: blue;
}

// специфічність цього селектора 0 0 2 0
.article > .article-title {
  color: gray;
}

// специфічність цього селектора 0 0 1 1
h1.article-title {
  color: orange;
}

// специфічність цього селектора 0 0 2 1
.article > h1.article-title {
  color: red;
}

Селектори 2 рангу

Кожен селектор ідентифікатора додає одиницю до другого рангу.

<article class="article">
<h1 class="article-title" id="title">Lorem ipsum dolor sit amet.</h1>
<p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

// специфічність цього селектора 0 0 1 0
.article-title {
  color: green;
}

// специфічність цього селектора 0 1 0 0
#title {
  color: blue;
}

Селектори 1 рангу

Селектори 1 рангу - це інлайнові (вбудовані) стилі, які прописують в самому файлі html в атрибуті style. Ці стилі мають найвищу специфічність і їх не можна перевизначити через стилі в CSS.

<!--специфічність цього селектора 1 0 0 0-->
<article class="article">
<h1 class="article-title" style="color: blue;">Lorem ipsum dolor sit amet.</h1>
<p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

Однакова специфічність

В селекторах з однаковою специфічністю браузер обере той, який розташований нижче у файлі CSS.

p {
  color: blue;
}

// браузер віддасть перевагу цьому стилю
p {
  color: green;
}

На практиці буває досить важко визначити специфічність. Тому селектори потрібно обирати якнайпростіші. Найкращий спосіб - використовувати селектори класу. Крім того, це покращує читабельність коду.

Є кілька варіантів організації стилізації в проєкті. Який обрати - залежить від уподобань розробника та стандартів розробки в команді.

Перший підхід уникнення складної специфічності

Батьківському елементу задають клас, а в файлі стилів відповідно звертаються до селектора тегу у якого батьком чи предком є спільний елемент із заданим класом.

<article class="article">
   <h1>Lorem ipsum dolor sit amet.</h1>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

.article {
color: blue;
}

.article > h1 {
color: red;
}

.article > p {
color: green;
}

Другий підхід уникнення складної специфічності

Кожному елементу дають назву класу, і його нащадкам також дають назви класів. І у файлі зі стилями звертаються за правилами опису стилів для нащадків та дітей.

<article class="article">
   <h1 class="title">Lorem ipsum dolor sit amet.</h1>
   <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

.article {
color: blue;
}

.article > .title {
color: red;
}

.article > .text {
color: green;
}

Третій підхід уникнення складної специфічності

Кожному елементу потрібно задати свій клас і у файлі стилів напряму звертатися до елементів з таким класом. Спільному батьку дають назву класу, а всім його нащадкам теж назву класу у форматі назва_класу_батька-назва_класу_нащадка. Схожий підхід також використовують в методології BEM (утім, яка останнім часом здає позиції популярності).

У сучасній веброзробці це найпоширеніший підхід писати стилі.

<article class="article">
   <h1 class="article-title">Lorem ipsum dolor sit amet.</h1>
   <p class="article-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</article>

.article {
color: blue;
}

.article-title {
color: red;
}

.article-text {
color: green;
}

Перебиваємо стиль за допомогою !important

!important - це ключове слово в CSS, яке можна додати до значення властивості, щоб надати йому найвищий пріоритет в каскаді стилів. Це означає, що будь-яке правило, яке має !important, буде переважати над усіма іншими правилами, навіть якщо вони мають більшу вагу специфічності чи знаходяться в останньому CSS-файлі.

<p class="example" style="color: blue;">Lorem ipsum.</p>

.example {
    color: red !important;
}

У цьому прикладі, color: red !important; вказує, що колір тексту для всіх елементів з класом .example повинен бути червоний незалежно від будь-яких інших стилів, які можуть бути визначені для цього елемента.

Використання !important варто обирати з обачливістю. Це може ускладнити управління стилями, особливо на великих проєктах, тому що важко відстежувати, які стилі мають вищий пріоритет через !important. Якщо можливо, краще уникати його використання і намагатися вирішувати конфлікти стилів за допомогою правильного використання специфічності та порядку визначення стилів. Утім при використанні деяких бібліотек це може бути єдиним способом "перебити" стилізацію, особливо коли немає прямого доступу до файлу зі стилями.

Наслідування властивостей

Наслідування - це механізм, за допомогою якого стилі, встановлені для одного елементу на веб-сторінці, можуть бути автоматично успадковані іншими елементами в його дочірніх елементах. Це означає, що якщо встановити стиль для батьківського елемента, цей стиль може бути успадкований його дочірніми елементами без необхідності явно вказувати цей стиль для кожного дочірнього елемента окремо.

Наприклад, якщо встановити колір тексту для <body> елемента, всі текстові елементи всередині <body>, такі як <p>, <h1>, <span> і т. д., можуть успадкувати цей колір тексту, якщо для них не встановлено власний колір тексту. Наслідуються переважно властивості оформлення тексту.

// тепер весь текст на сторінці буде зеленого кольору
body {
   color: green;
}

Проте не всі властивості успадковуються. Зазвичай, такі властивості як margin, border, padding, і background не успадковуються від батьківського до дочірнього елемента.

Також, посилання не наслідують колір тексту. Щоб примусово змусити наслідувати якийсь стиль використовують спеціальне значення inherit, щоб не прописувати двічі це значення. Тоді при зміні властивості буде достатньо змінити тільки властивість батька.

<section class="my-section">
   <a href="https://google.com" class="my-link">Google</a>
</section>

.my-section {
   color: green;
}

.my-link {
   color: inherit;
}

Примусове наслідування кольору краще задавати ключовим словом currentColor. Це часто використовують при роботі з векторною графікою, що буде розглянуто далі по конспекту.

Базові властивості для всього документу

Щоб зменшити файл стилів зазвичай додають в <body> базові найвживаніші стилі на сторінці, а потім там де треба точково їх модифікують. Це зокрема стосується кольору, шрифту, жирності шрифту, його розташування тощо.

body {
  font-family: "Roboto", sans-serif;
  color: #BBBBBB;
  font-weight: 400;
  font-size: 26px;
}