CSS переменные, или кастомные свойства, — это не просто модная фишка. Это инструмент, который может кардинально изменить ваш подход к написанию стилей. Если вы всё ещё пишете одни и те же цвета по всему файлу и вручную меняете их при редизайне, эта статья для вас.

Digital-студия WNDER

Что такое кастомные свойства и с чем их едят

Кастомные свойства — это сущности, определяемые разработчиком, которые содержат значения, используемые в других местах. Они похожи на переменные в Sass или Less, но работают прямо в браузере, без компиляции. Синтаксис прост: имя начинается с двух дефисов, например --main-color.

Объявляются они внутри селектора и наследуются потомками. Вот базовый пример:

:root {
  --primary-color: #3498db;
  --spacing: 16px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

Здесь мы определили две переменные в корне документа и используем их в кнопке. Если завтра дизайнер попросит поменять цвет, достаточно изменить его в одном месте.

Важно понимать, что кастомные свойства — это полноценные CSS-свойства. Они участвуют в каскаде, наследуются, их можно переопределять. Это даёт гибкость, недоступную препроцессорам.

Правило: Всегда определяйте глобальные переменные в :root. Это делает их доступными везде и упрощает переопределение.

Синтаксис и особенности работы

Синтаксис кастомных свойств несложен, но есть нюансы. Имя переменной чувствительно к регистру: --my-color и --My-Color — разные вещи. Значение может быть любым: цвет, размер, строка, даже фрагмент CSS.

Для использования переменной применяется функция var(). У неё есть второй аргумент — запасное значение, которое сработает, если переменная не определена:

.element {
  color: var(--text-color, black);
}

Это спасает, когда переменная может быть не задана. Также var() можно вкладывать, но не стоит увлекаться.

Кастомные свойства не работают в медиа-запросах внутри var()? На самом деле работают, но есть ограничения. Например, нельзя использовать переменные в именах свойств или селекторах. Только в значениях.

Ещё одна фишка: кастомные свойства можно менять через JavaScript. Это открывает двери для динамических тем.

document.documentElement.style.setProperty('--primary-color', '#e74c3c');

Одна строка — и весь сайт перекрасился. Удобно для переключателя тёмной темы.

Практические примеры и лайфхаки

Давайте посмотрим, где кастомные свойства особенно полезны.

1. Темы оформления. Определите набор переменных для светлой и тёмной темы, переключайте класс на body.

:root {
  --bg: #ffffff;
  --text: #333333;
}

body.dark {
  --bg: #1a1a1a;
  --text: #f0f0f0;
}

body {
  background: var(--bg);
  color: var(--text);
}

2. Адаптивные размеры. Задайте базовый размер шрифта и используйте его для отступов, чтобы всё масштабировалось пропорционально.

:root {
  --base-font: 16px;
  --spacing-unit: calc(var(--base-font) * 0.5);
}

p {
  margin-bottom: var(--spacing-unit);
}

3. Упрощение сложных значений. Если у вас есть градиент или тень, которые повторяются, вынесите их в переменную.

:root {
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card {
  box-shadow: var(--card-shadow);
}

Теперь сравним кастомные свойства с переменными препроцессоров, чтобы понять разницу.

Характеристика CSS переменные Sass/Less
Работают в браузере Да Нет, компилируются
Динамическое изменение Через JS Невозможно
Наследование Да Нет
Область видимости Каскадная Лексическая
Лайфхак: Используйте кастомные свойства для задания значений по умолчанию в компонентах. Например, --button-padding: var(--spacing, 10px); — так вы сможете переопределить отступы извне.

Продвинутые техники и подводные камни

Когда вы освоите базу, можно перейти к трюкам. Например, кастомные свойства можно использовать для создания миксинов. Допустим, у нас есть набор стилей для флекс-контейнера:

:root {
  --flex-center: display: flex; align-items: center; justify-content: center;
}

.container {
  var(--flex-center);
}

Но учтите: такой подход не работает, потому что var() возвращает значение, а не набор свойств. Однако можно использовать трюк с @property для анимации переменных.

Ещё одна мощная возможность — @property, которое позволяет определить тип переменной, её начальное значение и наследование. Это открывает путь к анимации градиентов и других сложных свойств.

@property --my-color {
  syntax: '';
  inherits: false;
  initial-value: #3498db;
}

.element {
  --my-color: #e74c3c;
  transition: --my-color 0.5s;
}

Теперь цвет можно плавно менять. Без @property браузер не знает, как интерполировать значение.

Подводные камни: кастомные свойства не работают в старых браузерах (IE). Если нужна поддержка, используйте фолбэки. Также они не видны в инструментах разработчика как обычные свойства — ищите их в разделе "Computed" или в инспекторе переменных.

Ещё один момент: если вы используете переменную в calc(), убедитесь, что она содержит единицы измерения. Например, --spacing: 10px;, а не просто 10.

Заключение

CSS переменные — это не просто замена препроцессорам. Это нативный инструмент, который делает стили более гибкими, поддерживаемыми и динамичными. Они позволяют легко менять темы, адаптировать дизайн и даже анимировать значения.

Начните с малого: вынесите основные цвета и отступы в :root. Затем экспериментируйте с переопределением в компонентах и JavaScript. Со временем вы оцените, насколько чище стал ваш CSS.

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

Студия WNDER