Почему стоит использовать семантические переменные (например, font-heading-h1), а не задавать стили напрямую для тегов h1/h2 в глобальном CSS?

Проблема прямой стилизации тегов

Когда вы задаёте стили напрямую для h1 или h2 в глобальном CSS, вы жёстко привязываете внешний вид к конкретному элементу. Это создаёт проблемы: если нужно изменить заголовок в определённом блоке, приходится переопределять стили с более высокой специфичностью или использовать !important. Со временем CSS разрастается, появляются конфликты, и поддержка становится сложной.

Что такое семантические переменные

Семантические переменные (или design tokens) — это именованные значения, которые описывают назначение стиля, а не его реализацию. Например, переменная --font-heading-h1 может хранить размер шрифта, но её имя говорит о том, что это шрифт для главного заголовка. Вы можете использовать её в любом компоненте, не привязываясь к тегу.

:root {
  --font-heading-h1: 2.5rem;
  --color-primary: #3498db;
}

h1 {
  font-size: var(--font-heading-h1);
}

.card-title {
  font-size: var(--font-heading-h1);
  color: var(--color-primary);
}

Преимущества подхода

• Гибкость: один и тот же стиль можно применять к разным элементам.
• Переопределение: в конкретном компоненте можно изменить переменную, не трогая глобальные стили.
• Темы: легко создавать светлую и тёмную темы, меняя значения переменных.
• Согласованность: все заголовки используют единый источник правды.

Практический пример

Представьте, что у вас есть карточка, где заголовок должен быть меньше стандартного h1. Вместо переопределения h1 вы создаёте локальную переменную:

.card {
  --font-heading-h1: 1.8rem;
}

.card h1 {
  font-size: var(--font-heading-h1);
}

Это работает без конфликтов и сохраняет читаемость кода.

Вывод

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