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

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

Представьте, что вы пишете тему для WordPress или админку на Laravel. У вас куча стилей: цвета, отступы, шрифты. И вдруг заказчик просит поменять синий цвет на зеленый. Если вы использовали обычный CSS, придется лезть в каждый файл и менять вручную. А если переменные — вы меняете одно значение, и всё обновляется само.

Кастомные свойства — это сущности, которые хранят значения CSS-свойств. Они объявляются с двумя дефисами (например, --main-color) и вызываются через функцию var(). Работают они во всех современных браузерах, так что бояться не стоит.

Как объявлять и использовать кастомные свойства

Синтаксис простой. Объявляете переменную внутри селектора (чаще всего в :root для глобального доступа):

:root {
  --primary-color: #3498db;
  --padding-base: 16px;
  --font-size-large: 24px;
}

А потом используете:

.button {
  background-color: var(--primary-color);
  padding: var(--padding-base);
  font-size: var(--font-size-large);
}

Можно задать значение по умолчанию, если переменная не определена:

.button {
  background-color: var(--primary-color, #333);
}

Это удобно, когда вы подключаете сторонние стили и не уверены, что переменная существует.

Область видимости и наследование

Кастомные свойства наследуются, как и обычные CSS-свойства. Если вы объявили переменную в родительском элементе, она будет доступна всем дочерним элементам, если её не переопределить.

Пример:

.card {
  --card-bg: #f0f0f0;
}
.card__title {
  background-color: var(--card-bg); /* сработает */
}

Но если внутри .card__title вы объявите свою --card-bg, она перекроет родительскую. Это работает как локальные переменные в PHP — приоритет у самого вложенного объявления.

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

Динамическое изменение через JavaScript

Это одна из самых крутых фишек. Вы можете менять CSS-переменные на лету с помощью JS. Например, для смены темы (темная/светлая) или анимации.

// Меняем цвет фона для всей страницы
document.documentElement.style.setProperty('--primary-color', '#e74c3c');

// Или для конкретного элемента
const card = document.querySelector('.card');
card.style.setProperty('--card-bg', '#ffcc00');

В PHP это тоже можно использовать, например, при генерации шаблона:

$color = '#2ecc71'; // Из базы данных
echo "<style>:root { --primary-color: $color; }</style>";

Так вы можете динамически подстраивать стили под пользовательские настройки.

Практические примеры из жизни PHP-разработчика

Допустим, у вас есть интернет-магазин на Laravel. Каждый товар имеет свой цвет акцента (например, для категории «Электроника» — синий, для «Одежды» — розовый). С помощью CSS-переменных это реализуется легко:

// В контроллере
$accentColor = $category->accent_color ?? '#333';
return view('product', compact('accentColor'));

// В Blade-шаблоне
<style>
  :root {
    --accent: {{ $accentColor }};
  }
  .product-card {
    border-color: var(--accent);
  }
  .product-card__price {
    color: var(--accent);
  }
</style>

Всё чисто, без дублирования стилей. Если завтра понадобится поменять цвет — меняете в базе, и всё обновляется.

Ещё один случай — создание кастомных виджетов. Например, вы пишете плагин для WordPress и хотите, чтобы пользователь мог настроить цвета через админку. Вы сохраняете значения в опциях, а затем выводите их в :root.

Сравнение CSS-переменных и препроцессоров (Sass, Less)

Многие привыкли использовать переменные в Sass или Less. Но у CSS-переменных есть преимущества и недостатки. Сравним в таблице:

ХарактеристикаCSS-переменныеSass/Less переменные
Область видимостиНаследуются, можно переопределять в любом селектореТолько в рамках компиляции, глобальные или локальные
Изменение в рантаймеДа, через JSНет, только на этапе компиляции
Поддержка браузерамиСовременные (IE не поддерживает)Не зависит от браузера (компилируется в обычный CSS)
Возможность использовать в медиа-запросахДа (но аккуратно, есть нюансы)Да, на этапе компиляции
Вычисление значенийТолько через calc()Математические операции напрямую

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

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

Типичные ошибки и как их избежать

  • Забыли объявить переменную. Если вы используете var(--undefined), браузер проигнорирует свойство. Всегда задавайте fallback.
  • Путаница с областью видимости. Если вы объявили переменную внутри .card, она не будет доступна в .footer. Используйте :root для глобальных.
  • Попытка использовать в медиа-запросах. Технически можно, но работает нестабильно. Лучше использовать препроцессорные переменные для брейкпоинтов.
  • Имена с пробелами или спецсимволами. CSS-переменные чувствительны к регистру и не любят пробелы. Используйте дефисы или camelCase.

Что в итоге

CSS-переменные — это не замена препроцессорам, а дополнение. Они дают гибкость в рантайме, упрощают поддержку тем и интеграцию с бэкендом. Как PHP-разработчик, вы можете выиграть, используя их для динамической генерации стилей. Начните с малого: вынесите основные цвета в :root и попробуйте поменять их через JS. Увидите, как это удобно.

Студия WNDER