Практика: создание дизайн-системы на основе CSS-переменных

Зачем нужна дизайн-система? 🌈

Представьте: у вас 50 кнопок на сайте, и все они должны изменить цвет с синего на красный. Без системы — это 50 правок. С CSS-переменными — одна! Дизайн-система это:

Единый стиль для всех компонентов
Быстрые изменения через переменные
Масштабируемость без хаоса

💡 Совет: CSS-переменные (Custom Properties) — это «живые» значения, которые можно менять на лету, даже через JavaScript!

Основы CSS-переменных 🛠️

Переменные объявляются в :root (глобально) или внутри селекторов (локально). Синтаксис:

:root {
  --primary-color: #3a86ff;
  --spacing-base: 1rem;
  --border-radius: 8px;
}

Используются через var():

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

🔥 Фишка: Можно задавать fallback-значения:

.element {
  color: var(--undefined-var, #000); /* Используется #000, если переменной нет */
}

Создаём каркас дизайн-системы 🏗️

Разберём ключевые категории переменных:

1. Цвета (палитра)

:root {
  /* Основные */
  --color-primary: #4361ee;
  --color-secondary: #7209b7;

  /* Текст */
  --color-text: #2b2d42;
  --color-text-light: #f8f9fa;

  /* Фоны */
  --bg-dark: #212529;
  --bg-light: #f8f9fa;
}

2. Типографика

:root {
  /* Шрифты */
  --font-main: 'Roboto', sans-serif;
  --font-heading: 'Montserrat', sans-serif;

  /* Размеры */
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;

  /* Межстрочный интервал */
  --line-height: 1.5;
}

3. Отступы и размеры

:root {
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  --container-width: 1200px;
  --border-width: 2px;
}

Практика: кнопка на основе системы 🎨

Соберём кнопку, используя наши переменные:

.button {
  /* Цвет и типографика */
  background: var(--color-primary);
  color: var(--color-text-light);
  font-family: var(--font-main);
  font-size: var(--text-md);

  /* Отступы и рамки */
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  border: none;

  /* Эффекты */
  transition: transform 0.2s;
}

.button:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

🎯 Запомните: компоненты должны быть «глухими» — они не знают конкретных значений, только переменные!

Темная тема за 5 минут 🌓

Сила переменных — в динамическом переопределении. Добавим тёмную тему:

:root {
  --color-text: #2b2d42;
  --bg-page: #ffffff;
}

[data-theme="dark"] {
  --color-text: #f8f9fa;
  --bg-page: #212529;
}

Переключение через JS:

document.documentElement.setAttribute('data-theme', 'dark');

Продвинутые техники 🔥

1. CSS-переменные в медиазапросах

:root {
  --container-width: 100%;
}

@media (min-width: 768px) {
  :root {
    --container-width: 720px;
  }
}

2. Математика с calc()

:root {
  --header-height: 60px;
}

.main {
  height: calc(100vh - var(--header-height));
}

Итоги: ваш чек-лист 🚀

Структура: Разделите переменные на логические группы (цвета, шрифты, отступы)
Именование: Используйте понятные имена типа --color-primary, а не --red
Компоненты: Стройте UI-кирпичики на основе переменных
Темы: Создавайте альтернативные цветовые схемы переопределением
Документируйте: Заведите README.md с описанием системы (как у Данилы Бежина в проектах 😉)