Как вычисляется CSS Specificity?

CSS Specificity: Полное руководство

CSS Specificity — это механизм, который определяет, какое CSS-правило будет применено к элементу, когда на него действуют несколько конфликтующих селекторов. Чем выше специфичность селектора, тем выше его приоритет.

Как вычисляется Specificity

Специфичность вычисляется как комбинация четырёх компонентов: (a, b, c, d)

• a — количество inline-стилей (атрибут style)
• b — количество ID селекторов (#id)
• c — количество классов, атрибутов ([type="text"]) и псевдо-классов (:hover, :focus)
• d — количество элементов и псевдо-элементов (div, ::before)

Примеры расчёта

// Селектор: div
// Specificity: (0, 0, 0, 1)
div { color: blue; }

// Селектор: .button
// Specificity: (0, 0, 1, 0)
.button { color: red; }

// Селектор: #header
// Specificity: (0, 1, 0, 0)
#header { color: green; }

// Селектор: div.container p.text
// Specificity: (0, 0, 1, 2) — 1 класс, 2 элемента
div.container p.text { color: purple; }

// Селектор: #nav ul li a:hover
// Specificity: (0, 1, 1, 3) — 1 ID, 1 псевдо-класс, 3 элемента
#nav ul li a:hover { color: orange; }

// Inline-стиль
<div style="color: yellow;">
// Specificity: (1, 0, 0, 0) — самый высокий приоритет!

Правила приоритета

1. !important — имеет самый высокий приоритет (кроме других !important)
2. Inline-стили (style="...") — (1, 0, 0, 0)
3. ID селекторы — (0, 1, ?, ?)
4. Классы и атрибуты — (0, 0, 1, ?)
5. Элементы — (0, 0, 0, 1)
6. Наследование и browser defaults — самый низкий приоритет

Сравнение специфичностей

// Сравниваем слева направо:
// (0, 1, 0, 0) vs (0, 0, 2, 0)
// 1 > 0, поэтому ID селектор выигрывает
#header { color: blue; }
.nav .container { color: red; } // Не применится

// (0, 0, 3, 0) vs (0, 0, 1, 5)
// 3 > 1 на второй позиции, классы выигрывают
.btn.active.primary { color: green; } // Применится
div.btn p span.text { color: yellow; }

// (1, 0, 0, 0) vs (0, 1, 0, 0)
// Inline-стиль ВСЕГДА выигрывает над ID
<div style="color: blue;" id="header"> <!-- будет синий -->

Практические советы

• Избегай !important — это нарушает каскадность и усложняет отладку
• Используй классы вместо ID — ID имеют слишком высокую специфичность, усложняют переиспользование
• Группируй селекторы логически — пиши более специфичные правила ниже в коде
• DevTools для отладки — используй инспектор браузера для просмотра примененных стилей
• БЭМ и CSS-классы — модульный подход помогает избежать проблем со специфичностью

Частая ошибка

// ПЛОХО — конфликт специфичностей
#header { color: blue; }
.container .text { color: red; } // Не сработает для #header .text

// ХОРОШО — используй одинаковый уровень специфичности
.header { color: blue; }
.container .text { color: red; }
// Или явно переопределяй для специального случая:
.header .text { color: green; }

Понимание CSS Specificity критично для эффективной разработки, особенно при работе с legacy-кодом и сложными стилями. Правильное использование этого механизма делает CSS более предсказуемым и поддерживаемым.