Пользовательские свойства CSS

До их появления повторяющиеся значения — фирменный цвет, радиус скругления, шаг отступов — либо копировали по всему файлу стилей, либо выносили в переменные препроцессора вроде Sass. Но переменная Sass существует только при сборке: в готовом CSS вместо неё стоит конкретное значение. Пользовательское свойство живёт в браузере. Его можно переопределить для отдельного блока, в медиазапросе или из JavaScript, и всё, что на него ссылается, пересчитается само.

Пример: тема и вариант компонента

:root {
  --accent: #2a6df4;
  --radius: 8px;
}
.button {
  background: var(--accent);
  border-radius: var(--radius);
}
.promo {
  --accent: #e8590c; /* в этом блоке кнопки станут оранжевыми */
}

Свойство наследуется: значение, объявленное у .promo, видят все потомки. Тёмную тему делают так же — переопределяют набор переменных у :root в медиазапросе prefers-color-scheme: dark или по классу. Второй аргумент var() — резервный вариант: var(--gap, 16px) подставит 16px, если переменная не объявлена. Из JavaScript значение меняют через element.style.setProperty('--accent', '#000'), а читают через getComputedStyle(element).getPropertyValue('--accent').

Где встречаются в WordPress

Блочные темы описывают палитру, шрифты и отступы в файле theme.json, а WordPress превращает их в переменные вида --wp--preset--color--primary, где последняя часть — slug цвета из настроек темы. Через них собственные стили можно согласовать с цветами, которые владелец сайта выбирает в редакторе.

Подводные камни

• Имена чувствительны к регистру: --Accent и --accent — разные свойства.
• Значение подставляется без проверки. Если в нём ошибка, свойство станет недействительным и откатится к унаследованному или начальному значению, а не к предыдущему правилу из каскада.
• Плавно анимировать переменную можно только после регистрации её типа через @property.