Как считается CSS specificity?

Question

Accepted Answer

## Кортеж (a, b, c)

Упрощённо сравнивают:

- **a** — количество id
- **b** — классы, атрибуты, псевдоклассы
- **c** — типы и псевдоэлементы

`!important` и origin (user agent / author / inline) важнее специфичности. При равенстве побеждает **порядок в каскаде**.

```css
#app .btn { }      /* 1,1,0 */
button.btn:hover { } /* 0,2,1 */
:where(.btn) { }   /* 0,0,0 — where обнуляет */
:is(.a, #b) { }    /* берёт максимум аргументов */
```

Inline style ≈ (1,0,0,0) выше id. `*` и комбинаторы вес не дают.

## Практика

Держите специфичность низкой и плоской. Война id/`!important` — симптом плохой архитектуры; `@layer` помогает упорядочить без гонки чисел.

## Итог

Считайте id → class → type, помните `:is`/`:where` и что каскад/origin/`!important` стоят выше арифметики.