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

Question

Accepted Answer

## Ключевая идея
**Specificity** — вес селектора, по которому браузер решает, какое из конфликтующих правил победит (при равной специфичности — порядок в каскаде / источник).

## Как считают (упрощённо)

1. Inline `style=""` — выше классов.
2. ID (`#id`) — сильнее классов.
3. Классы, атрибуты, псевдоклассы (`.btn`, `[type]`, `:hover`).
4. Элементы и псевдоэлементы (`div`, `::before`).
5. `!important` ломает обычную игру — сравнивают уже среди `!important`.

```css
div.card { }      /* 0,1,1 */
#hero .card { }   /* 1,1,0 — победит */
```

## Итог
Низкая специфичность (классы, BEM) упрощает переопределение. Гонка ID и `!important` — признак хрупкого CSS.