CSS-переменные

CSS‑переменные (CSS Custom Properties) — это нативный механизм в CSS, который позволяет один раз объявить значение (например, цвет или размер) и многократно переиспользовать его в стилях через функцию var(). Они являются полноценными CSS‑свойствами, хранятся на элементах в дереве стилей браузера и подчиняются обычным правилам каскада, наследования и специфичности.

Синтаксис простой: переменная объявляется как свойство с именем, начинающимся с --, а используется через var(--имя, запасное_значение). Чаще всего базовые переменные объявляют в селекторе :root, чтобы они были доступны во всём документе.

Ключевые особенности CSS‑переменных:

• Объявление как custom property. Имя переменной всегда начинается с --, например --primary-color; технически это обычное свойство, которое браузер хранит на конкретном DOM‑узле.
• Использование через var(). Подстановка значения происходит через запись var(--primary-color), при необходимости с запасным значением: var(--primary-color, blue).
• Область видимости и каскад. Значения переменных наследуются вниз по дереву, поэтому можно задать базовые значения в :root, а на отдельных компонентах переопределить их для локальных тем или модификаций.
• Динамическое изменение. В отличие от переменных препроцессоров Sass/Less, CSS‑переменные существуют в итоговом CSS и могут меняться на лету через JavaScript или смену классов/атрибутов; все зависящие стили обновятся без перекомпиляции.
• Темизация и дизайн‑системы. Набор переменных удобно использовать как «дизайн‑токены» (цвета, отступы, типографика и т.п.) и легко переключать светлую/тёмную тему или фирменные палитры.

На практике это уменьшает дублирование кода: вместо поиска и замены десятков одинаковых значений достаточно изменить одно объявление переменной. CSS‑переменные хорошо ложатся на концепцию дизайн‑систем: цвета, размерные шкалы, тени и прочие токены можно хранить в виде набора custom properties и гибко переопределять их для разных тем или частей приложения. Важно помнить, что в отличие от переменных препроцессоров, которые подставляются на этапе сборки и исчезают из итогового CSS, CSS‑переменные живут в браузере, учитывают контекст, каскад и могут вычисляться и меняться динамически.