Специфичность CSS-селекторов: полное руководство

Специфичность определяет, какое CSS-правило применится при конфликте. Понимание механизма расчёта избавляет от хаков с !important и «войн специфичности». В этой статье разберём, как вычисляется специфичность, чем отличаются inline-стили и !important, типичные ловушки и стратегии для поддержания предсказуемого каскада.

Для расчёта специфичности любого селектора используйте калькулятор специфичности CSS на reChecker.

Что такое специфичность

Специфичность (specificity) — вес селектора, по которому браузер выбирает, какое правило применить при конфликте. При равной специфичности побеждает правило, объявленное позже в каскаде.

Специфичность не имеет единицы «в пикселях» — это тройка чисел (a, b, c), где каждая позиция считает свой тип селекторов.

Как вычисляется специфичность (a, b, c)

Браузер считает три компонента:

Компонент	Что считает	Примеры
a	ID-селекторы	#header, #nav-main
b	Классы, атрибуты, псевдоклассы	.class, [type="text"], :hover, :nth-child()
c	Элементы, псевдоэлементы	div, p, ::before, ::after

Универсальный селектор * и комбинаторы (+, >, ~, пробел) не увеличивают специфичность.

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

Селектор	a	b	c	Пояснение
p	0	0	1	Один элемент
.class	0	1	0	Один класс
#id	1	0	0	Один ID
div p	0	0	2	Два элемента
.nav a:hover	0	2	1	Два псевдокласса/класса, один элемент
#header .nav li.active	1	2	1	Один ID, два класса, один элемент
*	0	0	0	Универсальный — нулевая специфичность

Сравнение идёт слева направо: сначала a, потом b, потом c. (1, 0, 0) побеждает (0, 99, 99).

Inline-стили

Стили в атрибуте style имеют специфичность выше любого селектора в таблице стилей (кроме !important). Их условно можно представить как (1, 0, 0, 0) — дополнительная «четвёртая» позиция, которая всегда побеждает обычные селекторы.

!important

!important выводит правило из обычного каскада. При конфликте двух !important побеждает тот, у кого выше специфичность селектора. Inline-стили с !important побеждают всё.

/* Специфичность (0, 1, 0) */
.button { color: blue; }

/* Специфичность (0, 2, 0) — побеждает */
.nav .button { color: red; }

/* !important — побеждает всё без !important */
.button { color: green !important; }

Типичные ошибки и ловушки

1. Накопление специфичности

Чем длиннее селектор, тем выше специфичность. Цепочка body .header .nav .menu .item a имеет (0, 4, 2). Чтобы переопределить её, нужен ещё более «тяжёлый» селектор — начинается гонка вооружений.

2. ID в селекторах

Один ID даёт (1, 0, 0) — больше, чем любой селектор без ID. #header побеждает .header .nav .menu .item. ID сложно переопределить без нового ID или !important.

3. !important как «быстрое решение»

Добавление !important ломает каскад. Следующее переопределение потребует ещё одного !important с ещё большей специфичностью. Итог — непредсказуемые стили.

4. Стили из фреймворков

Библиотеки вроде Bootstrap используют много классов и псевдоклассов. Переопределение .btn-primary может потребовать .my-form .btn-primary или даже дублирования селектора для увеличения специфичности.

5. Псевдоклассы и атрибуты

:not(), :is(), :has() — специфичность берётся от самого «тяжёлого» аргумента. :not(.class) даёт (0, 1, 0), как .class. [type="text"] считается как класс — (0, 1, 0).

Методология BEM

BEM (Block, Element, Modifier) снижает потребность в специфичности за счёт плоской иерархии классов:

• Block — независимый компонент: .card, .button
• Element — часть блока: .card__title, .card__body
• Modifier — вариант: .button--primary, .card--featured

/* Без BEM — вложенность, рост специфичности */
.header .nav .menu .item a { color: blue; }

/* С BEM — один класс, (0, 1, 0) */
.nav__link { color: blue; }

Один класс — одна единица специфичности. Переопределение — добавление модификатора или нового класса, без вложенности.

Стратегии избежания войн специфичности

1. Минимизировать вложенность

Вместо .page .header .nav a используйте .nav__link. Максимум 1–2 уровня вложенности для контекста.

2. Избегать ID в CSS

ID нужны для якорей и aria-labelledby, не для стилизации. Классы дают гибкость и предсказуемую специфичность.

3. Не использовать !important

Исключения: утилиты (например, .sr-only), переопределение сторонних библиотек при невозможности изменить порядок подключения. В остальных случаях — рефакторинг селекторов.

4. Использовать CSS-переменные

:root {
  --button-bg: #3b82f6;
}

.button {
  background: var(--button-bg);
}

/* Переопределение — без роста специфичности */
.header .button {
  --button-bg: #1d4ed8;
}

Переменные наследуются, переопределение не требует более «тяжёлого» селектора.

5. Порядок слоёв (cascade layers)

@layer позволяет задать приоритет слоёв:

@layer reset, base, components, utilities;

@layer utilities {
  .text-center { text-align: center; }
}

@layer components {
  .card { text-align: left; }
}

Правила в utilities побеждают components, независимо от специфичности и порядка в файле. Слои — современный способ управления каскадом.

Порядок в каскаде

При одинаковой специфичности побеждает правило, объявленное позже. Порядок подключения: reset → normalize → базовые стили → компоненты → утилиты. Если в main.css правило идёт после components.css, оно переопределит компонент при равной специфичности. Используйте это осознанно: не полагайтесь на случайный порядок, а выстраивайте слои стилей.

Специфичность и псевдоэлементы

::before и ::after считаются как один элемент (c). Селектор .card::before имеет (0, 1, 1). Псевдоклассы вроде :first-child, :nth-of-type() считаются как классы (b). ::placeholder и ::selection — псевдоэлементы. При отладке учитывайте, что вложенные псевдоэлементы накапливают специфичность так же, как обычные элементы.

Калькулятор специфичности

Ручной подсчёт (a, b, c) для длинных селекторов утомителен. Калькулятор специфичности CSS на reChecker позволяет:

• Ввести любой селектор
• Получить разбивку по a, b, c
• Сравнить несколько селекторов
• Понять, какое правило применится при конфликте

Инструмент полезен при отладке «не срабатывающих» стилей, при рефакторинге и при изучении каскада.

Специфичность в препроцессорах (SASS/SCSS)

Вложенность в SASS генерирует длинные селекторы: .block { .element { .modifier { } } } превращается в .block .element .modifier с растущей специфичностью. Используйте & осознанно: &--modifier даёт .block--modifier (один класс), а не .block .block--modifier. BEM в SASS лучше писать плоскими блоками, без глубокой вложенности — иначе преимущества BEM теряются.

Проверка на практике

При конфликте стилей:

1. Откройте DevTools → вкладка Elements → Computed
2. Найдите свойство и посмотрите, какое правило применилось
3. Проверьте специфичность селектора
4. Или вставьте селектор в калькулятор reChecker для точного расчёта

FAQ

Почему мои стили не применяются?

Скорее всего, побеждает правило с большей специфичностью. Проверьте селектор в DevTools или в калькуляторе специфичности reChecker. Упростите селектор или используйте класс с большей специфичностью, избегая !important.

Что побеждает: ID или классы?

Один ID (1, 0, 0) побеждает любое количество классов (0, n, m). Десять классов (0, 10, 0) всё равно меньше одного ID. Поэтому ID в CSS не рекомендуют.

Чем BEM помогает со специфичностью?

BEM использует один класс на элемент (.block__element, .block--modifier). Специфичность всегда (0, 1, 0). Нет вложенности — нет накопления специфичности. Переопределение — через модификатор или новый класс.

Когда можно использовать !important?

Исключительно для утилитарных классов (.sr-only, .hidden), которые должны перебивать всё. Для переопределения сторонних библиотек — только если нельзя изменить порядок подключения. В остальных случаях — рефакторинг.

Как рассчитать специфичность селектора?

Подсчитайте ID (a), классы/атрибуты/псевдоклассы (b), элементы/псевдоэлементы (c). Или используйте калькулятор специфичности на reChecker — введите селектор и получите разбивку (a, b, c) для любого селектора.