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

Доступ к DOM позволяет создавать переменные, сохранять их и повторно использовать по всему файлу стилей.

Что такое CSS-переменные (кратко)

Определение: CSS-переменная — это именованное свойство, начинающееся с двух дефисов, значение которого можно переиспользовать через функцию var().

Пример определения: переменная объявляется в селекторе (обычно :root), а затем подставляется туда, где требуется значение. Переменные поддерживают каскадирование и область действия, как обычные CSS-свойства.

Как объявлять и использовать 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{  
/*CSS variable*/  
--variable_name: value;  
}  

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

Чтобы подставить значение переменной, используйте функцию var():

:root {  
  /*CSS variable*/  
  --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);  
}  

В этом примере в :root объявлены две переменные: –primary и –secondary. Они затем подставляются в свойства цвета и фона для кнопок. Изменив значение переменной в одном месте, вы обновите все места её использования.

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

Пример с fallback:

:root {  
  --primary: #900c3f;  
  --secondary: #ff5733;  
}  
  
.btn {  
  padding: 1rem 1.5rem;  
  background: transparent;  
  font-weight: 700;  
  color: var(--primary, blue);  
}  

В этом примере, если по каким-то причинам –primary не задана или содержит ошибочное значение, будет использован синий цвет как запасной вариант. В качестве fallback можно передать и другую CSS-переменную.

Управление CSS-переменными из JavaScript

Манипуляция переменными через JavaScript позволяет динамически менять внешний вид сайта без перезагрузки стилей. При этом изменения влияют на текущую сессию: чтобы сохранить их между перезагрузками, нужно прописать их в исходных CSS-файлах или сохранить в локальное хранилище/cookie и восстанавливать при загрузке.

Пример: обновление переменной через JS.

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);  
}  

В этом коде функция changeColor() изменяет значение переменной –secondary при клике на кнопку. Можно получать текущее значение через getComputedStyle и менять его через setProperty. Также можно создавать новые переменные и удалять их:

// Create a new variable  
document.documentElement.style.setProperty('--new-color', 'blue');  
  
// Remove a variable  
document.documentElement.style.removeProperty('--new-color');  

Переменные и препроцессоры: когда использовать оба

Раньше переменные в CSS реализовывали через препроцессоры (SASS, LESS, Stylus). Препроцессоры расширяют CSS возможностями (переменные, функции, циклы) и компилируют код в обычный CSS, понятный браузеру.

С появлением CSS-переменных препроцессоры потеряли ключевую необходимость, но всё ещё полезны: они облегчают организацию кода, шаблонизацию и позволяют вычислять значения на этапе сборки.

Пример сочетания SASS и CSS-переменных:

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

Здесь SASS переменная $main-color используется для инициализации CSS-переменной, а SASS-функция lighten применяется для получения второго цвета. Важно: SASS-переменные недоступны из JavaScript, поэтому если требуется менять значения в рантайме, используйте CSS-переменные.

Практические советы для работы с CSS-переменными

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

Выберите конвенцию имён, которая упрощает чтение. Частая практика:

• –color-
• –spacing-
• –font-

Пример: –color-primary, –spacing-sm, –font-base.

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

Переменные работают и в media queries — это удобно для адаптивной типографики и отступов при изменении точек останова.

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

Переменные наследуются: объявив переменную на родительском элементе, вы измените её значение для всех потомков. Это эффективно для тем и локального переопределения.

Не злоупотребляйте переменными

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

Важно: тестируйте fallback-значения и поведение в браузерах, где поддержка может отличаться.

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

• Когда значение вычисляется на этапе сборки и не изменится в рантайме — можно использовать препроцессорные переменные.
• В очень ограниченных окружениях старых браузеров без поддержки custom properties (например, сильно устаревшие версии IE). В таких случаях нужны полифиллы или фолбэки.
• Когда переменные усложняют простую структуру — не превращайте простой стиль в многослойную систему переменных без веской причины.

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

1. Проанализируйте повторяющиеся значения (цвета, отступы, шрифты).
2. Выделите набор базовых переменных в :root (темы, базовая типографика, сетка).
3. Определите конвенцию именования и документируйте её.
4. Инициализируйте переменные и постепенно заменяйте хардкод в стилях.
5. Настройте тесты в браузерах и добавьте fallback-значения, где нужно.
6. Если нужно динамическое переключение темы — реализуйте слой управления из JS и сохраняйте выбор в localStorage.

Модель зрелости (начальный → продвинутый)

• Уровень 1 — локальные переменные: минимум, используются в ограниченных компонентах.
• Уровень 2 — глобальные переменные: основные цвета, типографика, отступы в :root.
• Уровень 3 — темы и динамика: переключаемые темы, управление через JS, интеграция с формой настроек.
• Уровень 4 — дизайн-система: переменные как контракт между дизайном и реализацией, документированные и покрытые тестами.

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

• Все повторяющиеся значения вынесены в переменные или обоснованы.
• Переменные имеют консистентные имена и документацию.
• Наличие fallback-значений, где это необходимо.
• Тесты проверяют корректность отображения в целевых браузерах.
• При динамическом изменении тема/переменные сохраняются между сессиями (если требуется).

Чеклист ролей

• Дизайнер: согласовать набор базовых цветов и отступов; обеспечить доступ к палитре.
• Frontend-разработчик: внедрить переменные, обеспечить каскадирование и fallback; написать документацию.
• QA: проверить отображение в целевых браузерах и при переключении тем.

Decision flow (простая схема выбора)

flowchart TD
  A[Есть повторяющиеся значения?] -->|Нет| B[Оставить как есть]
  A -->|Да| C[Нужно менять в рантайме?]
  C -->|Да| D[Использовать CSS-переменные + JS]
  C -->|Нет| E[Можно использовать препроцессор или CSS-переменные]
  D --> F[Добавить сохранение в localStorage]
  E --> G[Выбрать SASS для вычислений на этапе сборки или CSS-переменные для простоты]

Тесты и совместимость

CSS-переменные поддерживаются в большинстве современных браузеров, но всё ещё требуют проверки при работе с устаревшими системами. Обязательно:

• Тестировать на мобильных устройствах и в целевых версиях браузеров.
• Добавлять fallback-значения для критичных свойств.
• Документировать минимально поддерживаемую версию браузера.

Примечание: не придумывайте динамику там, где её не требуется. Простота — ваш друг.

Быстрые шаблоны и сниппеты

Шаблон глобальных переменных в :root:

:root {
  --color-primary: #1a73e8;
  --color-secondary: #ff6f61;
  --bg-page: #ffffff;
  --text-default: #222222;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
}

Сниппет переключения темы:

function applyTheme(theme) {
  const root = document.documentElement;
  Object.keys(theme).forEach(key => {
    root.style.setProperty(key, theme[key]);
  });
  localStorage.setItem('theme', JSON.stringify(theme));
}

// При загрузке
const saved = localStorage.getItem('theme');
if (saved) applyTheme(JSON.parse(saved));

Риски и рекомендации по смягчению

• Риск: потеря совместимости с устаревшими браузерами. Смягчение: предоставить fallback-значения и документировать минимальные требования.
• Риск: хаотичное использование переменных. Смягчение: ввести конвенции и ревью кода.
• Риск: излишняя сложность тем. Смягчение: начинать с простых вариативных настроек и постепенно усложнять.

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

• CSS-переменные упрощают поддержку стилей и позволяют менять дизайн централизованно.
• Они поддерживают каскадирование и могут быть изменены из JavaScript для динамики.
• Используйте их совместно с препроцессорами там, где нужно вычисление на этапе сборки.
• Документируйте конвенцию имён, добавляйте fallback-значения и тестируйте в целевых браузерах.

Спасибо за внимание — применяйте переменные осмысленно и ваша кодовая база станет чище и гибче.