CSS-переменные (официальное название — кастомные свойства) — это мощный инструмент для хранения значений, которые можно многократно использовать в таблицах стилей. Они работают нативно в браузерах, поддерживают наследование и динамическое изменение через JavaScript. В отличие от переменных в препроцессорах, они вычисляются во время выполнения, что открывает возможности для динамической тематизации и адаптивного дизайна.
Что такое CSS-переменные
CSS-переменные — это пользовательские свойства, которые начинаются с двух дефисов. Их основное назначение — уменьшение повторения кода и упрощение изменения значений в одном месте.
Переменные объявляются внутри селектора и становятся доступными для всех потомков этого селектора. Наиболее часто их объявляют в псевдоклассе :root для глобальной доступности.
Объявление и использование переменных
Объявление переменной происходит через свойство, начинающееся с —. Для использования применяется функция var().
:root { --main-color: #3498db; --padding-size: 20px;
} .element { background-color: var(--main-color); padding: var(--padding-size);
}
Можно указывать значения по умолчанию на случай, если переменная не определена:
.element { color: var(--undefined-color, black);
}
Область видимости и наследование
CSS-переменные правилам наследования. Переменная, объявленная в элементе, доступна всем его потомкам. Это позволяет создавать локальные контексты.
.container { --local-color: red;
} .container .item { color: var(--local-color); /* Будет red */
} .other-item { color: var(--local-color); /* Не будет работать */
}
Работа с JavaScript
Переменные можно читать и изменять через JavaScript, что полезно для динамического изменения стилей.
// Получение значения
const color = getComputedStyle(document.documentElement) .getPropertyValue('--main-color'); // Установка значения
document.documentElement.style .setProperty('--main-color', '#e74c3c');
Типичные ошибки и ограничения
Новички часто допускают несколько стандартных ошибок при работе с переменными.
- Попытка использовать переменные в медиа-запросах — не работает
- Использование несуществующих переменных без fallback-значения
- Забывают про область видимости и ожидают глобальный доступ
- Пытаются использовать в свойствах, которые не поддерживают переменные
Производительность может снижаться при частом изменении переменных через JavaScript, особенно на мобильных устройствах.
Сравнение с препроцессорами
CSS-переменные и переменные в препроцессорах решают схожие задачи, но имеют принципиальные различия.
- Препроцессоры вычисляют значения на этапе компиляции
- CSS-переменные работают в браузере и могут меняться динамически
- Препроцессоры поддерживают сложные операции и функции
- CSS-переменные поддерживают наследование и область видимости
Выбор зависит от конкретных задач проекта. Часто их используют вместе.
Чек-лист использования
- Определите глобальные переменные в :root
- Используйте осмысленные имена с префиксом —
- Всегда указывайте fallback-значения для важных свойств
- Проверяйте поддержку в целевых браузерах
- Тестируйте производительность при частых изменениях
CSS-переменные особенно полезны для создания тем оформления, адаптивного дизайна и компонентного подхода. Они становятся стандартом современной веб-разработки и поддерживаются всеми актуальными браузерами.