Как организовать глобальные стили в проекте?

Глобальные стили — это набор CSS-правил, которые применяются ко всему приложению независимо от конкретного компонента. Они нужны, чтобы задать единый визуальный фундамент: типографику, цвета, отступы, поведение box-sizing, сброс браузерных стилей. Без них каждый компонент придётся настраивать с нуля, что ведёт к хаосу и дублированию.

Основные подходы

• Обычный CSS-файл — подключается один раз в точке входа (main.jsx или index.js). Просто, но нет изоляции и переменных.
• CSS-переменные — позволяют задавать тему и переключать её без пересборки. Работают нативно во всех современных браузерах.
• Препроцессоры (Sass, Less) — дают вложенность, миксины, функции, переменные на этапе сборки.
• CSS-in-JS (styled-components, Emotion) — стили живут рядом с компонентами, глобальные задаются через createGlobalStyle или Global.
• Utility-first (Tailwind) — глобально настраивается конфиг, а классы применяются точечно.

Пример с CSS-переменными

:root {
  --color-primary: #2563eb;
  --color-text: #1f2937;
  --radius: 8px;
  --font-base: 'Inter', sans-serif;
}

body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  box-sizing: border-box;
}

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

Практические рекомендации

1. Держите глобальный файл небольшим: reset, переменные, базовые теги.
2. Не пишите в глобальных стилях селекторы конкретных компонентов — это нарушает изоляцию.
3. Для темы используйте CSS-переменные и переключайте их через класс на html или body.
4. В больших проектах комбинируйте: глобальные переменные + модульные или scoped-стили компонентов.

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