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

Question

Accepted Answer

Когда несколько правил нацелены на один элемент, **специфичность** определяет, какое из них применится. Это оценка, вычисляемая из частей селектора, сравниваемая как кортеж `(ids, classes, elements)`.

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

Сравнивайте слева направо; первый столбец, в котором значения различаются, определяет победителя.

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## Ключевые правила

- Один **id** имеет больший вес, чем любое количество **классов**; один класс имеет больший вес, чем любое количество элементов. (Вы не можете «суммировать» нижние уровни, чтобы победить уровень выше.)
- Если специфичность **одинакова**, выигрывает правило, которое появляется **позже** в исходном коде (порядок в источнике).
- **`!important`** полностью переопределяет обычную специфичность — это последнее средство, которое трудно переопределить (потребуется ещё один `!important` с более высокой специфичностью).

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

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

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## Почему это важно

Большая часть проблем «почему мой CSS не применяется?» вызвана конфликтом специфичности — выигрывает более специфичное правило, находящееся в другом месте.

Сохранение селекторов простыми и плоскими (предпочитайте одиночные классы, избегайте id и `!important`) делает специфичность предсказуемой, поэтому стили остаются легкими для переопределения и поддержки.