Что такое CSS-переменные в одной строке: CSS-переменная — это пользовательское свойство, объявляемое в CSS с префиксом “–“ и доступное через функцию var() как в самом CSS, так и косвенно через JavaScript.

Почему это важно

• Повторное использование. Одно объявление — много мест применения.
• Простота поддержки. Обновил переменную — поменял стиль везде.
• Динамичность. Можно менять стили в рантайме через JavaScript.

Как определить и использовать CSS-переменные

Чтобы сделать файл стилей более упорядоченным и удобным для поддержки, вы можете использовать CSS-переменные в любом свойстве, которое принимает значение.

Приведём исходный пример HTML и CSS без переменных.

HTML:

  
    
    
  
  
    

      
CSS Variables
      

        Primary
        Secondary
      
    
  

CSS (без переменных):

.btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
  color: red;
}

Класс .btn в таком варианте не динамичен: для каждой вариации нужно создавать отдельный класс. CSS-переменные решают эту проблему.

Инициализация переменной

Чтобы объявить CSS-переменную, используйте двойной дефис перед именем. Как правило, их объявляют в :root, чтобы переменные были глобальными для всего документа:

:root{
  /* CSS-переменная */
  --variable_name: value;
}

Переменную можно объявить и внутри любого селектора — тогда область её видимости ограничена этим селектором и его потомками.

Подстановка значения с помощью var()

Для использования переменной применяйте функцию var():

:root {
  /* CSS-переменные */
  --primary: #900c3f;
  --secondary: #ff5733;
}

.btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
  color: var(--primary);
  background-color: var(--secondary);
}

.sub-primary {
  color: var(--secondary);
  background-color: var(--primary);
}

Теперь две переменные используются для цвета текста и фона — изменить их можно в одном месте.

Функция var() принимает второй аргумент — значение по умолчанию (fallback), которое используется, если переменная не объявлена или содержит некорректное значение.

Пример с fallback:

:root {
  --primary: #900c3f;
  --secondary: #ff5733;
}

.btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
  color: var(--primary, blue);
}

Здесь, если –primary не задана, браузер применит синий цвет.

Изменение и переопределение CSS-переменных через JavaScript

CSS-переменные удобно менять в рантайме. Изменение применяется немедленно, но по умолчанию не сохраняется между сессиями: чтобы зафиксировать изменения, нужно сохранить значение на стороне клиента (localStorage, cookie) или на сервере.

Пример: HTML с функцией для изменения переменной

  
    
    
    
  
  
    

      
CSS Variables
      

        
          Primary
       
        Secondary
      
    
  

CSS, использующий переменные:

:root {
  --primary: #900c3f;
  --secondary: #ff5733;
}

.btn {
  padding: 1rem 1.5rem;
  background: transparent;
  font-weight: 700;
}

.sub-primary {
  color: var(--primary);
  background-color: var(--secondary);
}

До нажатия:

После нажатия:

Также можно создать или удалить переменные через JS:

// Создать новую переменную
document.documentElement.style.setProperty('--new-color', 'blue');

// Удалить переменную
document.documentElement.style.removeProperty('--new-color');

Использование CSS-переменных с препроцессорами

Ранее многие задачи решались препроцессорами (SASS/LESS/Stylus). Препроцессоры дают расширенные возможности (переменные, функции, циклы), но их переменные недоступны в рантайме через JavaScript. Комбинирование SASS и CSS-переменных даёт лучшее из обоих миров: мощные трансформации на этапе сборки и динамика в рантайме.

Пример использования SASS вместе с CSS-переменной:

:root {
  --primary: $main-color;
  --secondary: lighten(var(--primary), 20%);
}

.btn {
  color: var(--primary);
  background-color: var(--secondary);
}

Здесь $main-color — SASS-переменная, а CSS-переменные можно менять уже в браузере.

Важно: SASS-переменные не читаются JavaScript, поэтому для динамических настроек используйте именно CSS-переменные.

Рекомендации и лучшие практики

Начинайте с понятной схемы имён

Используйте префиксы для групп переменных: –color-, –spacing-, –font- и т.д. Это упрощает поиск и предотвращает коллизии.

Используйте переменные в медиазапросах

Переменные можно изменять внутри медиазапросов, чтобы адаптировать дизайн под разные экраны без дублирования стилей.

:root {
  --container-width: 1200px;
}

@media (max-width: 768px) {
  :root {
    --container-width: 100%;
  }
}

Пользуйтесь каскадом

Переменные наследуются: если вы установите переменную на контейнере, она будет доступна всем потомкам.

Не злоупотребляйте

Слишком большое количество глобальных переменных может усложнить поддержку. Делайте логические группы и держите документацию.

Когда переменные не помогут (контрпримеры)

• Если значение вычисляется исключительно на этапе сборки и никогда не должно меняться в рантайме, SASS-переменных может быть достаточно.
• Если нужно полностью избавиться от каскада и определить значение только в локальном компоненте, локальная переменная в компонентном стиле будет уместнее.
• Для сложных математических операций и цветовых манипуляций на этапе сборки иногда удобнее функции препроцессора.

Совместимость и тестирование

CSS-переменные поддерживаются в большинстве современных браузеров, однако для старых браузеров (особенно устаревших версий Internet Explorer) поддержки может не быть. Всегда тестируйте:

• проверьте отсутствие ошибок в консоли;
• протестируйте fallback-значения в var();
• убедитесь, что динамические изменения работают при отключённых скриптах (при необходимости).

Таблица совместимости (качественная оценка):

Важно: проверяйте текущую статистику поддержки перед критическим решением — таблица даёт общий ориентир, а не гарантии для конкретной версии.

Методология внедрения CSS-переменных в проект (мини-план)

1. Инвентаризация: найдите повторяющиеся значения цвета, отступов, размеров.
2. Группировка: выделите логические группы переменных (цвета, отступы, типографика).
3. Декларация: объявите переменные в :root с понятными именами.
4. Замена: постепенно заменяйте «жёстко прописанные» значения на var().
5. Тестирование: проверяйте в ключевых браузерах и на ключевых страницах.
6. Документация: опишите соглашения по именованию и процесс изменения в репозитории.

Ролевые чеклисты

Для дизайнера:

• определить и согласовать основную палитру и шкалу отступов;
• проверить визуальные состояния компонентов при изменении переменных.

Для фронтенд-разработчика:

• объявить переменные в :root;
• заменить повторяющиеся значения;
• добавить fallback там, где нужна надёжность.

Для QA:

• проверить поведение с переключением переменных через JS;
• протестировать разные разрешения экрана и отключённый JS;
• проверить fallback-значения.

Критерии приёмки

• Переменные объявлены в соответствии с соглашением по именованию.
• Все повторяющиеся значения заменены в ключевых компонентах.
• Изменения переменных через JavaScript работают и сохраняются (если требуется).
• Тесты в основных браузерах пройдены, fallback сработал при отсутствии переменной.

Шпаргалка по синтаксису

• Объявление: –my-var: value;
• Использование: color: var(–my-var);
• Фallback: color: var(–my-var, #000);
• Установка через JS: document.documentElement.style.setProperty(‘–my-var’, ‘red’);
• Удаление через JS: document.documentElement.style.removeProperty(‘–my-var’);

Тест-кейсы и приёмообразец

1. Изменение переменной в :root меняет все элементы, использующие её.
2. Локальная переопределённая переменная на контейнере имеет приоритет для его потомков.
3. Если переменная не задана, используется fallback в var().
4. Удаление переменной через JS приводит к использованию fallback или наследуемого значения.

Краткое резюме

CSS-переменные — простой, но мощный инструмент для управления стилями. Они упрощают рефакторинг, делают дизайн гибким и позволяют динамически менять внешний вид приложения через JavaScript. Внедряя переменные, следуйте соглашениям по именованию, документируйте решения и тестируйте совместимость.

Важно

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