Урок 40. Обзор урока: CSS-переменные (custom properties)

📁 Раздел: Современный CSS ⏱️ Время изучения: ~75 мин 🎯 Сложность: Средняя
#root

⚡ Кратко

CSS-переменные хранят значение в одном месте: :root { --brand: #0f766e; }, а правила читают его через var(--brand). Переменные наследуются и переопределяются в области — так делают темы и варианты компонентов без дублирования кода.

О чём урок

CSS custom properties (переменные) — собственные свойства вида --brand, которые читаются функцией var(). Базовые токены хранятся в :root, наследуются всеми потомками и переопределяются в области компонента или в @media — это позволяет менять тему и варианты оформления без копирования правил.

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

Ключевые понятия

  • :root — глобальная область для токенов
  • --имя — объявление переменной
  • var(--имя) — чтение значения
  • var(--имя, fallback) — запасное значение
  • наследование переменных
  • переопределение в области видимости
  • переопределение в @media (темы)
  • дизайн-токены

Структура урока

📖 Теория

Понятия, правила и практическая логика.

🔖 Справочник

Синтаксис и короткие примеры.

💻 Примеры

Рабочая HTML/CSS связка.

⚖️ Старый vs Новый

Что усложняло код раньше и чем заменить.

📝 Задания

Практика для самостоятельной проверки.

✅ Решения

Один из корректных вариантов.

🐛 Ошибки

Типовые проблемы и исправления.

🏠 Домашнее задание

Итоговая мини-практика урока.

🔗 Ресурсы

Документация и повторение.

Навигация