Specificity

Specificity — вес селектора после равенства origin, importance и layer order. Сравнивают как (inline, ID, классы/атрибуты/pseudo-classes, элементы/pseudo-elements).

Примеры:

• `#nav .item` → (0, 1, 1, 0)
• `.btn:is(:hover, :focus)` → specificity самого специфичного аргумента в :is
• `:where(.btn)` → нулевая specificity от :where

					/* Трудно переопределить без эскалации */
#sidebar .nav li a.active { color: red; }

/* Поддерживаемая альтернатива */
.nav__link--active { color: red; }
				

На интервью: посчитайте вес селектора и объясните, зачем :where для переиспользуемых utilities и почему ID ведут к тяжёлым override.

Типовые ошибки: глубокие descendant chains привязывают стили к форме разметки; inline styles и ID загоняют последующий код в !important или абсурдную specificity.

Компромисс: «защитная» specificity против гибкости темизации — низкая specificity плюс layers масштабируется лучше.

Чеклист:

• Избегайте лишних ID в CSS компонентов.
• :where для обёрток без веса.
• Упрощайте descendant chains.
• Классы и layers вместо эскалации.