Глубокое погружение в CSS переменные

Если вы когда-нибудь ловили себя на мысли, что править один и тот же цвет в десяти местах — это боль, а менять отступы через поиск по файлу — занятие для мазохистов, то эта статья для вас. Мы поговорим о CSS-переменных (или, если по-научному, о кастомных свойствах). Это не магия, но очень близко к ней. После прочтения вы сможете сделать свой код чище, а жизнь — проще.

Digital-студия WNDER

Что такое CSS-переменные и зачем они нужны

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

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

Ещё одно преимущество — читаемость. Вместо того чтобы писать #a1b2c3 или rgba(100, 200, 50, 0.5), вы пишете var(--main-color). Сразу понятно, что это за цвет и зачем он нужен.

Синтаксис и объявление переменных

Объявить переменную очень просто. Пишете два дефиса, потом имя переменной, двоеточие и значение. Обычно переменные объявляют в корневом элементе — :root. Это как глобальная область видимости в JavaScript. Если объявить переменную внутри какого-то селектора, она будет доступна только в этом блоке и его потомках.

:root {
  --main-color: #3498db;
  --main-padding: 16px;
  --font-size: 18px;
}

.button {
  background-color: var(--main-color);
  padding: var(--main-padding);
  font-size: var(--font-size);
}

Всё просто. Теперь, если вы захотите поменять основной цвет, достаточно изменить одну строку в :root. Все элементы, которые используют var(--main-color), обновятся автоматически.

Значения по умолчанию и фолбэки

Иногда бывает так, что переменная ещё не определена, а вы уже хотите её использовать. Или вы хотите предусмотреть случай, если переменная вдруг не сработает (например, в старых браузерах). Для этого у var() есть второй аргумент — значение по умолчанию.

.button {
  background-color: var(--main-color, #ff0000);
}

Если переменная --main-color не определена, то фон будет красным. Это очень удобно, когда вы создаёте компонент, который должен работать в разных контекстах, и не хотите, чтобы он ломался без переменной.

Переменные в сочетании с вычислениями

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

:root {
  --base-size: 10px;
}

.card {
  padding: calc(var(--base-size) * 2);
  margin-bottom: calc(var(--base-size) + 5px);
}

Теперь, если вы захотите увеличить базовый размер, все отступы и поля изменятся пропорционально. Это особенно полезно при создании адаптивных интерфейсов.

А ещё можно комбинировать переменные с другими функциями, например, с rgb() или hsl(). Так вы можете менять только один канал цвета, не затрагивая остальные.

:root {
  --brand-color: 52, 152, 219;
}

.button {
  background-color: rgb(var(--brand-color));
}

.button:hover {
  background-color: rgb(var(--brand-color), 0.8);
}

В этом примере мы храним RGB-компоненты в переменной, а при наведении добавляем прозрачность. Красиво и гибко.

Сравнение с препроцессорами

Многие используют Sass или Less, где переменные существуют уже давно. Но у CSS-переменных есть важное преимущество: они работают в рантайме, то есть в браузере. Это значит, что их можно менять через JavaScript, а также они наследуются и переопределяются в зависимости от контекста.

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

Практические советы и лайфхаки

Вот несколько приёмов, которые помогут вам использовать переменные на полную катушку.

• Создавайте систему дизайн-токенов. Заведите переменные для всех основных цветов, шрифтов, отступов. Это упростит поддержку и согласованность.
• Используйте переменные в медиа-запросах. Вы можете менять значение переменной при разных разрешениях экрана, и все элементы, которые её используют, адаптируются автоматически.
• Не бойтесь длинных имён. Лучше назвать переменную --main-background-color, чем --bg. Читаемость важнее краткости.
• Используйте переменные для анимаций. Например, задайте скорость анимации переменной, и вы сможете менять её глобально.

Как менять переменные через JavaScript

Одно из главных преимуществ CSS-переменных — их можно менять на лету. Например, вы хотите переключать тему сайта (тёмная/светлая) без перезагрузки страницы. Просто меняете значения переменных через JS.

// Получаем корневой элемент
const root = document.documentElement;

// Меняем переменную
root.style.setProperty('--main-color', '#e74c3c');

// Или читаем текущее значение
const currentColor = getComputedStyle(root).getPropertyValue('--main-color');
console.log(currentColor);

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

Заключение

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

Начните с малого: вынесите основные цвета и размеры в переменные. Потом добавьте переменные для отступов и шрифтов. Постепенно вы заметите, как код становится понятнее, а правки — быстрее.

И помните: переменные — это не серебряная пуля. Их не нужно использовать везде, где только можно. Но там, где они уместны, они экономят массу времени и нервов.