Какие знаешь стандартные случаи специфичности в CSS?

Специфичность в CSS: стандартные случаи и правила вычисления

Специфичность — это механизм в CSS, который определяет, какое правило стилей будет применено к элементу при наличии конфликтующих объявлений. Это не просто «последнее правило в коде», а система с четкими математическими правилами. Знание этих случаев критично для написания устойчивого и предсказуемого кода.

Формула и расчет специфичности

Спефичность рассчитывается по формуле, которую часто представляют как четыре числа (a, b, c, d) или как вес в виде строки. В современной трактовке (без устаревших атрибутов style) используется трехзначная система:

Специфичность = (b, c, d)

Где:

• b — количество ID селекторов в правиле.
• c — количество классовых селекторов, селекторов атрибутов и псевдоклассов.
• d — количество селекторов элементов и псевдоэлементов.

Каждый уровень независим и сравнивается по порядку: сначала b, потом c, потом d. Правило с более высоким значением в левой части побеждает.

Стандартные случаи и примеры

1. Идентификаторы (ID) обладают максимальным весом в своей категории

Один ID селектор перевешивает любое количество классов или элементов.

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

/* Специфичность: (0, 2, and 1) - ПРОИГРАЕТ */
.content .title h1 { color: red; }

В этом случае h1 внутри .title и .content будет синим (blue), потому что правило с ID имеет более высокий первый компонент (1 против 0).

2. Классы, атрибуты и псевдоклассы равны по весу

Все они попадают в категорию c.

/* Специфичность: (0, 2, 0) */
.button.active { background: green; }

/* Специфичность: (0, 1, 1) - ПРОИГРАЕТ */
button[disabled] { background: grey; }

Псевдоклассы, такие как :hover, :nth-child() или :not(), также считаются здесь. Однако важно отметить, что псевдокласс :not() сам не увеличивает вес, но его аргумент учитывается.

3. Селекторы элементов и псевдоэлементы — наименьший вес

Они составляют категорию d.

/* Специфичность: (0, 0, 3) */
div ul li { font-size: 12px; }

/* Специфичность: (0, 1, 0) - ПОБЕДИТ */
.small-text { font-size:要px; }

Один класс перевешивает цепочку из трех элементов.

4. Встроенные стили (style атрибут) и !important

Это особые случаи, выходящие за рамки стандартной формулы.

• Встроенные стили (устаревший подход, но стоит знать) имели специфичность выше любой комбинации селекторов в файле CSS, примерно (1, 0, 0, 0) в старой 4-значной системе.
• Директива !important — это абсолютный перевес. Она применяется к конкретному свойству, а не к селектору. Правило с !important победит любое другое правило без него, даже с более высокой специфичностью. Однако !important внутри встроенного стиля победит !important в внешнем CSS.

#element { color: red; }
.element { color: green !important; } /* Элемент будет зеленым */

5. Контекстные и комбинированные селекторы

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

/* Специфичность: (0, 2, 1) */
nav > .menu.item { }

/* Специфичность складывается: (0, 1, 0) + (0, 1, 1) = (0, 2, 1) */

Обратите внимание, что селектор * (универсальный) имеет специфичность (0, 0, 0) и никак не влияет на расчет.

Практические следствия и лучшие практики

1. Избегайте чрезмерного использования ID для стилизации. Их высокая специфичность делает переопределение в дальнейшем очень сложным, часто требуя нового ID или !important.
2. Классы — ваш основной инструмент. Они обеспечивают достаточный вес для большинства задач и сохраняют гибкость.
3. Минимизируйте длинные цепочки элементов. Они не только имеют низкую специфичность, но и создают жесткую зависимость от структуры HTML.
4. Псевдокласс :not() — исключение для расчета. Например, :not(.class) имеет специфичность (0, 1, 0) (вес класса внутри него), но сам :not не добавляет дополнительного веса.
5. !important — это последнее средство. Его использование нарушает естественный поток специфичности и приводит к «войнам важности», где для переопределения нужно ставить еще более поздний !important. Это признак плохой архитектуры CSS.

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