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

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

Специфичность (Specificity) в CSS — это алгоритм, с помощью которого браузер определяет, какие стилевые правила из множества потенциально применимых к одному элементу будут применены в конечном итоге. Это механизм разрешения конфликтов, когда несколько селекторов с разными правилами нацелены на один и тот же HTML-элемент. Специфичность можно представить как «вес» или «приоритет» селектора: чем выше специфичность, тем больше вероятность, что его стили будут использованы.

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

Специфичность рассчитывается как сумма четырех компонентов, которые часто представляют в виде четырех чисел (a, b, c, d) или (0, 0, 0, 0), где:

• a (Inline styles): Стили, заданные напрямую в атрибуте style HTML-элемента. Имеют наивысший приоритет.
• b (ID selectors): Количество ID-селекторов в правиле (например, #header).
• c (Class selectors, Attribute selectors, Pseudo-classes): Количество селекторов классов (.menu), селекторов атрибутов ([type="text"]) и псевдоклассов (:hover, :nth-child(n)).
• d (Type selectors, Pseudo-elements): Количество селекторов типов (элементов) (div, p) и псевдоэлементов (::before, ::first-line).

Важное правило: специфичность сравнивается поразрядно, начиная с самого старшего разряда a. Селектор (1, 0, 0, 0) всегда победит селектор (0, 100, 100, 100), потому что его значение в разряде a больше.

Примеры расчета

/* Специфичность: (0, 0, 0, 1) - один селектор типа */
p {
  color: black;
}

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

/* Специфичность: (0, 1, 0, 0) - один селектор ID */
#unique {
  color: red;
}

/* Специфичность: (0, 0, 1, 1) - один класс + один тип */
div.warning {
  color: orange;
}

/* Специфичность: (0, 0, 2, 1) - два класса + один тип */
nav.menu.main {
  color: green;
}

/* Специфичность: (0, 1, 1, 3) - один ID + один класс + три типа */
body header#main h1.title {
  color: purple;
}

/* Специфичность: (1, 0, 0, 0) - инлайн-стиль (в HTML: <p style="color: pink;">) */

Ключевые правила и исключения

• !important: Директива !important, добавленная к значению свойства, имеет наивысший приоритет и перекрывает даже инлайн-стили. Однако ее использование считается антипаттерном, так как сильно усложняет поддержку кода и ломает естественный каскад. Используйте ее только в крайних случаях (например, для переопределения стилей из сторонних библиотек, которые вы не можете изменить иначе).

  .override {
    color: white !important; /* Специфичность игнорируется, это правило применится */
  }
  

• Каскад (Cascade): Если специфичность двух правил одинакова, то побеждает то правило, которое объявлено позже в коде (ниже в таблице стилей или в более позднем подключенном файле). Это основа принципа каскада.

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

• Псевдокласс :is(), :has() и :not() принимают специфичность самого весомого селектора внутри своих скобок.

  /* Специфичность: (0, 1, 0, 0), как у #id внутри :not() */
  div:not(#unique) {
    color: grey;
  }
  

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

1. Старайтесь поддерживать низкую специфичность. Это делает ваши стили более предсказуемыми и переопределяемыми. Предпочитайте классы (c-разряд) ID-селекторам (b-разряд) и инлайн-стилям (a-разряд).
2. Избегайте длинных цепочек селекторов. Селекторы вроде body div#container ul li a не только имеют высокую специфичность, но и неэффективны для браузера. Используйте осмысленные классы.
3. Используйте методологии (БЭМ, OOCSS). Они помогают избегать конфликтов специфичности за счет использования только классов с одинаковым весом.
4. Помните о порядке. При равной специфичности «последний — сильнейший». Это полезно для создания темизации или переопределения стилей в медиа-запросах.

Итог: Понимание специфичности — фундаментальный навык для создания устойчивых, масштабируемых и легко поддерживаемых CSS-кодовых баз. Это позволяет разработчику точно предсказывать, какие стили будут применены, и эффективно решать возникающие конфликты без привлечения «тяжелой артиллерии» в виде !important.