Что такое специфичность в CSS и как она рассчитывается?

Специфичность в CSS и её расчёт

Специфичность (specificity) — это мера того, насколько конкретным является CSS селектор. Когда к элементу применяются несколько правил, браузер использует правило с наивысшей специфичностью. Это основа каскада в CSS.

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

Специфичность представляется как число с четырьмя компонентами: [a, b, c, d]

• a — встроенные стили (inline styles) в атрибуте style=""
• b — селекторы ID (#id)
• c — селекторы классов, атрибутов и pseudo-классов (.class, [attr], :hover)
• d — селекторы элементов и pseudo-элементов (div, ::before)

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

/* (0, 0, 0, 0) — не применяется */
* {}

/* (0, 0, 0, 1) — селектор элемента */
div {}
p {}

/* (0, 0, 1, 0) — селектор класса */
.button {}
.highlight {}

/* (0, 0, 1, 1) — класс + элемент */
div.card {}
p.text {}

/* (0, 0, 2, 0) — два класса */
.card.active {}

/* (0, 0, 1, 2) — класс + два элемента */
.header nav ul {}

/* (0, 1, 0, 0) — селектор ID */
#main {}
#sidebar {}

/* (0, 1, 1, 0) — ID + класс */
#sidebar .nav-item {}

/* (1, 0, 0, 0) — встроенный стиль */
<div style="color: red;"></div>

/* (0, 0, 0, 3) — три элемента (селектор потомка) */
body main section {}

/* (0, 0, 3, 1) — три класса + элемент */
body .container .card.active .title {}

/* (0, 0, 2, 0) — атрибут считается как класс */
input[type="text"] {}
[disabled] {}

/* (0, 0, 1, 1) — pseudo-класс + элемент */
a:hover {}
:not(.disabled) {}
li:nth-child(3) {}

Правило каскада

Когда несколько правил применяются к элементу, побеждает правило с наивысшей специфичностью:

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

/* Специфичность: (0, 0, 1, 0) — ПОБЕЖДАЕТ */
.text { color: red; }

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

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

(1, 0, 0, 0) > (0, 1, 0, 0) > (0, 0, 1, 0) > (0, 0, 0, 1)

Inline > ID > Class > Element

Пример конфликта:

/* (0, 1, 0, 0) */
#main { color: blue; }

/* (0, 0, 1, 1) — НЕ побеждает! */
.header p { color: red; }

/* Результат: синий (ID имеет выше специфичность) */

!important — отрицание каскада

/* Самая высокая специфичность */
p { color: red !important; }

#main { color: blue; } /* Не поможет */

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

Избегай !important! Это признак плохого дизайна CSS. Очень трудно переопределить потом.

Практические примеры

/* CSS для кнопки */
.btn { 
  padding: 10px 20px; /* (0, 0, 1, 0) */
}

.btn.primary {
  background: blue; /* (0, 0, 2, 0) */
}

.btn.primary:hover {
  background: darkblue; /* (0, 0, 2, 1) */
}

#submit-btn {
  width: 200px; /* (0, 1, 0, 0) — переопределит всё выше */
}

Частые ошибки

1. Много вложенности селекторов

/* Плохо — специфичность (0, 0, 1, 3) */
body .container .card .title { color: red; }

/* Хорошо — специфичность (0, 0, 1, 0) */
.card-title { color: red; }

2. Переполнение классами

/* Плохо */
.header .nav .item .link { color: blue; }

/* Хорошо */
.nav-link { color: blue; }

BEM и специфичность

BEM (Block Element Modifier) решает проблему специфичности:

/* Все селекторы имеют одинаковую специфичность (0, 0, 1, 0) */
.card { }
.card__title { }
.card__body { }
.card--active { }

/* Легко переопределить */
.card--featured { background: gold; }

Как отладить

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

1. Выбери элемент
2. Смотри панель Styles
3. Вычёркнутые стили = заблокированы селектором с выше специфичностью

Лучшие практики

✅ Используй классы — специфичность (0, 0, 1, 0) ✅ Избегай ID в CSS — слишком высокая специфичность ✅ Не используй !important — усложняет отладку ✅ Следуй методологии (BEM, SMACSS) — стабильная специфичность ✅ Минимизируй вложенность — селекторы потомка добавляют специфичность ✅ CSS preprocessors (SCSS) — помогают структурировать, но помни про вложенность

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