Css-переменные в веб-разработке: как организовать цвета, размеры и типографику проекта

6 минут чтения

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

Опорные решения перед созданием CSS-токенов

Начинайте с повторяющихся значений и визуальных ролей, а не с переменных для каждого отдельного элемента.
Разделяйте базовые значения палитры и токены, которые описывают назначение цвета в интерфейсе.
Задайте ограниченную шкалу отступов и размеров; добавляйте новые шаги, только если их требует дизайн.
Для текста определите семейства, доступные начертания и масштаб заголовков и основного текста.
Храните глобальные токены на корневом уровне, а специфичные значения - рядом с компонентом.
Перед внедрением проверьте контрастность, адаптивность, темизацию и отображение существующих страниц.

Соберите палитру и назначьте цветам смысловые роли

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

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

Составьте список основных ролей: фон страницы, поверхность карточки, основной текст, приглушённый текст, акцент, границы и состояния ошибок. Значение переменной должно объяснять применение цвета, а не только оттенок:

:root {
  --color-brand-700: #2457a6;
  --color-text-primary: #20242a;
  --color-text-muted: #626a75;
  --color-surface-page: #ffffff;
  --color-border-default: #d9dee7;
  --color-status-error: #b42318;
}

Проверьте, что названия не привязаны к конкретному экрану, если токен нужен в разных частях сайта. Например, --color-text-primary описывает роль, а --blue-dark - только характеристику оттенка.

Разведите базовые значения и токены интерфейса

Перед настройкой подготовьте утверждённые цвета из макетов или бренд-гайда, перечень компонентов и доступ к исходным стилям. Для работы достаточно редактора кода и браузера с инструментами разработчика; дизайн-макет пригодится для сверки значений и ролей.

Создайте два уровня переменных. Базовый уровень хранит исходные значения, а интерфейсный связывает их с назначением в продукте:

:root {
  /* Базовые значения */
  --blue-700: #2457a6;
  --gray-900: #20242a;
  --white: #ffffff;

  /* Токены интерфейса */
  --color-action-primary: var(--blue-700);
  --color-text-primary: var(--gray-900);
  --color-surface-page: var(--white);
}

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

Настройте шкалу размеров для отступов и компонентов

Перед внедрением пройдите короткий чек-лист подготовки:

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

Соберите повторяющиеся значения. Найдите отступы между секциями, элементами списков и содержимым карточек. Не объединяйте разные размеры только ради сокращения списка: сначала проверьте, совпадает ли их назначение.
Определите последовательную шкалу. Выберите несколько удобных шагов, которые покрывают типичные отступы проекта. Размеры, не подходящие к шкале и используемые однократно, можно оставить локальными.
Задайте имена токенам. Используйте названия, по которым понятны категория и относительный размер. Например, префикс --space- помогает отличить отступы от размеров шрифта.
Подключите переменные в правилах. Сначала замените повторяющиеся значения в общих стилях и часто используемых компонентах. Проверяйте страницы после каждой группы изменений.
Оставьте компонентные исключения локальными. Значение вроде внутреннего отступа конкретной кнопки не обязательно становится глобальным токеном, если оно не повторяется в системе.

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
}

.card {
  padding: var(--space-4);
  gap: var(--space-3);
}

Опишите типографику через семейства, веса и масштаб

Проверьте результат по этому списку:

Указано основное семейство шрифта и резервные варианты.
Для используемых начертаний определены доступные веса, без обращения к отсутствующим файлам шрифта.
Размер основного текста задан отдельным токеном.
Заголовки используют согласованную шкалу, а не набор случайных значений.
Межстрочные интервалы настроены для разных ролей текста.
Длинные заголовки и абзацы остаются читаемыми на узком экране.
Компонентные параметры не маскируются под общие токены типографики.

:root {
  --font-family-base: Arial, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-size-body: 1rem;
  --font-size-title: 2rem;
  --line-height-body: 1.5;
  --line-height-title: 1.2;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

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

Выберите формат хранения и область действия переменных

Распространённые ошибки при организации токенов:

Создавать переменные с непонятными именами вроде --c1 или --big.
Смешивать в одном наборе базовые оттенки и роли интерфейса, не показывая связь между ними.
Объявлять глобальными значения, которые нужны одному компоненту и не повторяются.
Дублировать одинаковое значение под несколькими именами без объяснения различий.
Создавать слишком много ступеней шкалы до анализа реальных макетов.
Менять токен, не проверяя компоненты и страницы, которые от него зависят.
Использовать переменные с наследованием там, где требуется локальное значение для конкретного компонента.

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

:root {
  --color-surface-page: #ffffff;
}

[data-theme="dark"] {
  --color-surface-page: #171a20;
}

.card {
  --card-padding: 1rem;
  padding: var(--card-padding);
}

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

Проверьте токены на адаптивности, темах и в реальных макетах

Подход выбирают по размеру и устройству проекта:

Один набор в :root. Уместен для небольшого сайта с единой темой и компактной палитрой.
Токены по темам. Подходят, когда интерфейсу нужны светлый и тёмный режимы либо отдельные оформления для разных брендов.
Глобальные и компонентные переменные. Полезны в проекте с большим числом компонентов: общие роли задаются централизованно, исключения остаются локальными.

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

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

Разбор практических ситуаций при настройке CSS-переменных

Когда базовый цвет стоит связывать с токеном интерфейса?

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

Нужно ли выносить в переменную каждое CSS-значение?

Нет. Глобальные переменные полезны для повторяющихся или системных значений; единичные параметры конкретного компонента можно оставить в его стилях.

Где объявлять переменные для тёмной темы?

Объявите переопределения на селекторе темы, например на элементе с атрибутом data-theme="dark". Общие правила компонентов смогут использовать те же токены интерфейса.

Как поступить, если отступ в макете не совпадает со шкалой?

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

Можно ли задавать типографические токены в rem?

Да, это удобный способ задавать размеры относительно корневого размера шрифта. Проверьте отображение текста при настройках масштабирования и на разных ширинах экрана.

Как безопасно внедрять токены в существующий проект?

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

Post Views: 0