CSS-переменные
Тема дорожной карты · Frontend разработчик
Пользовательские свойства CSS, широко известные как CSS-переменные, — это нативная возможность CSS3, позволяющая разработчикам определять переиспользуемые значения с синтаксисом --имя-свойства: значение и ссылаться на них в любом месте таблицы стилей через функцию var(--имя-свойства). В отличие от переменных препроцессоров (Sass или Less), CSS-переменные живут в браузере: они каскадируются по DOM, подчиняются специфичности и могут обновляться во время выполнения через JavaScript с помощью element.style.setProperty('--color-primary', '#ff0000'). Объявление цветовой палитры, типографической шкалы и токенов отступов дизайн-системы как CSS-переменных на :root с последующим переопределением внутри @media (prefers-color-scheme: dark) или компонентных селекторов — современный подход к построению гибкой и поддерживаемой CSS-архитектуры. Tailwind CSS v4 построен на CSS-переменных под капотом, а библиотеки компонентов React — Radix UI и Chakra UI — активно используют CSS-переменные в своих API для тематизации.
Как это работает
CSS-переменные стилизует DOM через селекторы (какие элементы), свойства (что менять), каскад (правила приоритета + наследования: inline > id > class > tag, !important перебивает всё). Layout-движки: normal flow, flexbox (1D), grid (2D), float (legacy). Box model: content + padding + border + margin. Современные фичи: custom properties (--var), @layer, container queries, :has(). Specificity + каскад — главный источник багов "почему не применяется?".
Когда применять
Flexbox — для 1D-раскладок (ряд или колонка элементов); Grid — для 2D-раскладок (ряды + колонки). Custom properties — для темизации + консистентности (--primary-color: #007aff). @layer — для организации specificity в больших проектах. Tailwind/UnoCSS или ванильный CSS — на вкус команды; оба работают; важна консистентность. Mobile-first media queries (min-width: не max-width:) композируются лучше.
Типичные ошибки
Ловушки CSS-переменные: !important повсюду ("фикс, который всегда работает" — пока два !important не столкнутся, и исходный баг возвращается умноженным); pixel-perfect раскладки ломаются на другом шрифте/размере (используйте em/rem для типографии); войны z-index, когда реальный фикс — рефакторинг stacking context; стили в JS inline (lock-in, нет темизации). Прочтите MDN про каскад один раз.