Мы долго боролись со специфичностью, но почему-то используем :root

27 августа 2025 г.

Долгие годы фронтенд-сообщество боролось со специфичностью: выравнивали селекторы, избегали вложенности, практиковали БЭМ и «плоские деревья».

Мы ушли от

#about ul li a {
  color: rebeccapurple !important;
}

.about__link {
  color: rebeccapurple;
}

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

:root {
  --color-link: rebeccapurple;
}

.about__link {
  color: var(--color-link);
}

Моя мысль простая: необязательно класть кастомные свойства в :root. :root - это всего лишь селектор, который совпадает с html, но обладает более высокой специфичностью. Ждать, что :root превратиться в svg глупая затея, так как нет ни единой строчки в наших стилях, которые были бы готовы к такому изменению. Это звучит как оправдание использования :root.

Так зачем нам :root для кастомных свойств? Зачем повышать специфичность, если мы можем использовать html?

:root — не «магическое место для переменных», а просто избыточный выбор по умолчанию.

Мне кажется, это такой же странность, как бояться повесить класс на <html class="page">.