Как работает приоритетность стилей в CSS?

Приоритетность стилей в CSS (CSS Specificity)

Это одна из самых важных концепций в CSS, которая частто вызывает путаницу. Специфичность определяет какой стиль будет применён когда есть конфликтующие правила.

1. Основной принцип: каскадность

/* Браузер читает CSS сверху вниз */
/* Последний стиль переопределяет предыдущий */

p { color: blue; }      /* Первое правило */
p { color: red; }       /* Это переопределит синий */

/* Результат: текст красный */

2. Таблица специфичности (от меньшего к большему)

1. Элементы и псевдо-элементы (type selectors):
   p, div, span, h1, ::before, ::after = 1 балл

2. Классы, атрибуты, псевдо-классы (class selectors):
   .container, [disabled], :hover, :focus = 10 баллов

3. ID селекторы:
   #header, #footer = 100 баллов

4. Inline стили:
   style="color: red" = 1000 баллов

5. !important:
   color: red !important = ОГРОМНЫЙ приоритет

3. Подсчёт специфичности

/* p { color: blue; } */
/* Специфичность: (0, 0, 1) - 1 балл */

/* .text { color: green; } */
/* Специфичность: (0, 1, 0) - 10 баллов */

/* p.text { color: yellow; } */
/* Специфичность: (0, 1, 1) - 11 баллов */

/* #main { color: orange; } */
/* Специфичность: (1, 0, 0) - 100 баллов */

/* div#main.container p.text { color: purple; } */
/* Специфичность: (1, 2, 2) - 100 + 20 + 2 = 122 балла */

/* Самый частый case: class vs element */
.button { padding: 10px; }      /* 10 баллов */
button { padding: 5px; }        /* 1 балл */
/* Кнопка получит padding: 10px (класс сильнее) */

4. Практический пример: конфликты

/* Файл styles.css */
.card {
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
}

/* Файл components.css */
.card {
  padding: 10px;  /* Это переопределит 20px? Нет! */
}

/* Результат: padding 20px */
/* Причина: оба имеют одинаковую специфичность (0, 1, 0) */
/* Выигрывает ПОСЛЕДНИЙ в порядке (cascade) */

/* Если бы было так: */
div.card {          /* Специфичность (0, 1, 1) = 11 */
  padding: 10px;
}

.card {             /* Специфичность (0, 1, 0) = 10 */
  padding: 20px;
}

/* Тогда выигрывает div.card с 11 баллами */

5. Inline стили vs классы

<style>
  .text { color: blue; }  /* 10 баллов */
</style>

<!-- Inline стиль выигрывает ВСЕГДА (кроме !important) -->
<p class="text" style="color: red;">Текст</p>
<!-- Результат: красный (inline = 1000 баллов) -->

6. !important - ядерный вариант

#main { color: red; }               /* 100 баллов */
.button { color: blue !important; } /* ВЫИГРЫВАЕТ */

/* Результат: синий */
/* !important переопределяет всё кроме более сильного !important */

/* Но это ПЛОХАЯ практика! */
/* ❌ Не используй !important в обычном коде */
/* Используй только в утилитах или для переопределения library кода */

7. Специфичность селекторов: примеры

/* 1 балл (type) */
p { }
div { }
button { }
::before { }

/* 10 баллов (class) */
.container { }
[disabled] { }
:hover { }
:focus { }
:nth-child(2) { }

/* 100 баллов (ID) */
#header { }
#main { }

/* Комбинации */
div.container { }           /* 1 + 10 = 11 */
.container > p { }          /* 10 + 1 = 11 */
#header .nav { }            /* 100 + 10 = 110 */
body .header .logo { }      /* 1 + 10 + 10 = 21 */

/* Селекторы с низкой специфичностью */
* { }                       /* 0 - универсальный селектор */
div > p { }                 /* 1 + 1 = 2 - комбинатор не считается */

8. Каскадность при одинаковой специфичности

<style>
  /* Порядок имеет значение! */
  .text { color: blue; }      /* Первый .text */
  .text { color: red; }       /* Второй .text - ВЫИГРЫВАЕТ */
  .text { color: green; }     /* Третий .text - ВЫИГРЫВАЕТ */
</style>

<!-- Результат: зелёный (последний в порядке источника) -->
<p class="text">Текст</p>

9. Лучшие практики для управления специфичностью

/* ❌ Плохо: высокая специфичность */
body header nav ul li a.active {
  color: red;  /* Специфичность: (0, 1, 6) */
}

/* ✅ Хорошо: низкая специфичность, легче переопределить */
.nav-link.active {
  color: red;  /* Специфичность: (0, 2, 0) */
}

/* ✅ Хорошо: используй классы вместо комбинаций селекторов */
.button {
  padding: 10px;
}

.button--large {
  padding: 20px;
}

.button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ✅ Избегай ID селекторов в CSS */
/* #main { }  <- Сложно переопределить */
/* .main { }  <- Лучше использовать класс */

10. Работа с Tailwind CSS

Tailwind решает эту проблему автоматически:

// В Tailwind все классы имеют одинаковую специфичность
// Порядок в HTML определяет приоритет (последний класс выигрывает)

<div className="text-blue-500 text-red-500">
  {/* Текст будет красным (последний класс) */}
</div>

// Более точный селектор переопределяет
<div className="bg-blue-500 bg-red-500 hover:bg-green-500">
  {/* Фон красный, при :hover зелёный */}
</div>

11. DevTools для отладки специфичности

В браузере (Chrome DevTools):

1. Открой Element Inspector
2. Выбери элемент
3. В панели Styles видишь все правила
4. Зачёркнутые стили = переопределены
5. Наведи на стиль - видишь файл и строку
6. Все правила сортированы по специфичности

Это самый удобный способ отладить конфликты!

12. Специфичность селекторов в Tailwind

/* Все Tailwind классы имеют специфичность (0, 1, 0) */
.text-red-500 { color: rgb(239, 68, 68); }
.text-blue-500 { color: rgb(59, 130, 246); }

/* Поэтому порядок в HTML важен: */
<p class="text-red-500 text-blue-500">Синий текст</p>

/* Если нужна высокая специфичность: */
<p class="!text-red-500">Красный (! важный)</p>

Памятка по приоритетам

1. Встроенные browser стили (самые слабые)
2. Пользовательские стили: элементы
3. Пользовательские стили: классы, атрибуты, псевдо-классы
4. Пользовательские стили: ID
5. Inline style=""
6. !important (самый сильный, избегай)

Ощая формула специфичности: (ID, Classes, Elements)
Например: (1, 2, 3) -> сильнее (0, 10, 50)

Вывод

Хорошая архитектура CSS избегает высокой специфичности:

• Предпочитай классы ID селекторам
• Избегай глубокой вложенности селекторов
• Используй Tailwind для консистентной специфичности
• В конфликтах смотри DevTools (это быстрее чем считать)
• Никогда не используй !important в продакшене (только в утилитах)