Frontend Советы: “🎨 Совет: не бойся CSS-переменных! Сегодня хочу показать вам, как CSS-…”

🎨 Совет: не бойся CSS-переменных!

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

Когда вы только начинаете изучать CSS, кажется, что переменные — это «фишка для продвинутых». Но на самом деле они помогают держать стиль проекта под контролем.

Пример 👇


:root {
  --main-color: #0ea5e9;
  --text-color: #1e293b;
}

body {
  background: var(--main-color);
  color: var(--text-color);
}

button {
  background: var(--main-color);
}

Теперь вы можете изменить цветовую схему всего проекта, просто поменяв значение --main-color в одном месте.
А если хотите сделать тёмную тему, достаточно переопределить эти переменные:


@media (prefers-color-scheme: dark) {
  :root {
    --main-color: #1e293b;
    --text-color: #f1f5f9;
  }
}

🔥 Всё — тёмная тема готова без лишнего кода!

Попробуйте применить это в своём проекте — даже маленьком. Потом уже не сможете без переменных 😄

👉@frontend_sovet