Какая очередность приоритетов классов в CSS?

Специфичность (Specificity) в CSS: Иерархия и правила приоритета

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

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

Специфичность можно представить как четырехзначное число в системе счисления с очень большим основанием (условно 0,0,0,0). Для расчета используется следующий порядок:

• A (Тысячи): Стили !important (не считается формально частью специфичности, но кардинально меняет приоритет).
• B (Сотни): Inline-стили (атрибут style="..." в HTML). Имеют самый высокий вес среди обычных селекторов.
• C (Десятки): Количество ID-селекторов (#header).
• D (Единицы): Количество классов, псевдоклассов (:hover, :nth-child()) и атрибутов ([type="text"]).
• E (Нули): Количество тегов (div, p) и псевдоэлементов (::before, ::first-letter).

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

Примеры расчета и сравнения

Давайте проиллюстрируем на примерах. Чем "левее" находится ненулевое число в условной записи B,C,D, тем выше приоритет.

/* Пример 1: Специфичность = (0,0,1,0) - один класс */
.button { color: blue; }

/* Пример 2: Специфичность = (0,0,1,1) - один класс и один тег */
a.button { color: green; } /* Этот стиль применится, т.к. (0,1) > (0,0) */

/* Пример 3: Специфичность = (0,1,0,0) - один ID */
#nav { color: red; } /* Этот стиль применится, т.к. ID(1,0,0) > Класс(0,1,1) */

/* Пример 4: Специфичность = (0,1,2,1) - ID, 2 класса, тег */
#nav .menu.item li { color: orange; }

/* Пример 5: Inline-стиль - Специфичность = (1,0,0,0) */
/* <li style="color: purple;">Элемент</li> */ /* Будет иметь наивысший приоритет */

Ключевые правила разрешения конфликтов

1. Сравнение по порядку (A > B > C > D > E): Браузер сравнивает значения, начиная с самого левого (A). Как только найдено отличие, правило с большим значением побеждает. 1,0,0,0 (inline) всегда побьет 0,12,5,3 (любое количество ID и классов).

2. Правило !important: Это модификатор, который переопределяет всю логику специфичности.

    *   Стиль с `!important` имеет наивысший приоритет.
    *   Однако, если два конфликтующих правила оба имеют `!important`, между ними снова начинает работать сравнение специфичности.
    *   **Важно:** Чрезмерное использование `!important` считается антипаттерном, так как ломает каскад и сильно усложняет отладку.

```css
.warning { color: black; }
.alert { color: red !important; } /* Применится этот цвет, даже если у .warning выше специфичность где-то еще */
```

3. Порядок в источнике (Source Order): Если специфичность одинакова, побеждает то правило, которое объявлено последним в CSS (ниже в коде или в подключаемом файле, который находится позже). Это проявление каскада (Cascade).

```css
.btn { background: grey; } /* Это правило будет проигнорировано... */
.btn { background: blue; } /* ...в пользу этого, т.к. специфичность равна, а оно объявлено позже */
```

Практические рекомендации

• Старайтесь управлять стилями через классы. Используйте методологии вроде БЭМ (Блок-Элемент-Модификатор), которые помогают минимизировать вложенность и держать специфичность низкой и предсказуемой (часто на уровне одного класса).
• Избегайте использования ID для стилизации. Их специфичность слишком высока, и ее сложно переопределить без нового ID или !important.
• Минимизируйте вложенность селекторов. Селектор .header .nav .list .item {...} имеет специфичность 0,0,4,0, что избыточно, если можно использовать один модифицирующий класс .menu__item--special.
• !important — последнее средство. Используйте его только для переопределения стилей из внешних библиотек, когда нет другого выхода, или для утилитарных классов, которые гарантированно должны сработать (например, .hidden { display: none !important; }).

Алгоритм применения стилей браузером (упрощенно)

1. Нахождение всех правил: Браузер собирает ВСЕ правила CSS, применяемые к данному элементу.
2. Сортировка по специфичности: Правила сортируются по убыванию специфичности.
3. Сортировка по порядку: Внутри групп с одинаковой специфичностью правила сортируются по порядку объявления (позже = приоритетнее).
4. Применение !important: Правила с !important помечаются и сравниваются между собой по той же логике (специфичность -> порядок), но в отдельной, высшей группе приоритета.

Таким образом, очередность приоритетов (от высшего к низшему) выглядит так:

1. !important (с учетом своей внутренней специфичности)
2. Inline-стили (атрибут style)
3. ID-селекторы
4. Классы, псевдоклассы, селекторы атрибутов
5. Селекторы тегов и псевдоэлементов
6. Универсальный селектор и комбинаторы (не влияют на вес)

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