Перейти к основному содержимому

[Easy] Selector Specificity (Специфичность селекторов)

1. Как рассчитать специфичность селектора?​

Специфичность определяет, какое CSS-правило побеждает, когда несколько правил нацелены на один и тот же элемент.

Простая ментальная модель:

inline style > ID > class/attribute/pseudo-class > element/pseudo-element

2. Подсчёт специфичности​

Представьте в виде столбцов:

  • A: inline style
  • B: ID
  • C: классы, атрибуты, псевдоклассы
  • D: имена элементов и псевдоэлементы

Сравнение идёт слева направо.

<div id="app" class="wrapper">Text</div>
#app {
  color: blue;
}

.wrapper {
  color: red;
}

#app побеждает, потому что специфичность ID выше.

3. Распространённые примеры​

p {}                /* 0-0-0-1 */
.card p {}          /* 0-0-1-1 */
#root .card p {}    /* 0-1-1-1 */

4. А что насчёт !important?​

!important переопределяет обычный порядок каскада в пределах одного источника/слоя, но его повсеместное использование делает CSS трудным в поддержке.

Предпочтительно:

  • Лучшая структура селекторов
  • Меньшая глубина вложенности
  • Предсказуемая область видимости компонентов

5. Лучшие практики​

  • Поддерживайте низкую и единообразную специфичность
  • Избегайте глубоких цепочек селекторов
  • Предпочитайте стилизацию на основе классов для переиспользуемого UI
  • Используйте утилитарные классы или области видимости компонентов, чтобы избежать «войн селекторов»

6. Быстрые ответы для собеседования​

Q1: Имеет ли значение порядок при равной специфичности?​

Да. Побеждает объявление, записанное позже.

Q2: Рекомендуется ли стилизация на основе ID?​

Обычно нет для масштабируемых UI-систем; классы более переиспользуемы.

Q3: Почему стоит избегать частого использования !important?​

Это нарушает предсказуемый каскад и увеличивает стоимость поддержки.