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

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

Слои стилей

• Tokens — цвета, отступы, шрифты, радиусы, тени. Хранятся как CSS-переменные или SCSS-переменные.
• Base — reset/normalize, типографика, стили для html/body.
• Utilities — атомарные классы (например, .mt-4, .text-center).
• Components — стили конкретных компонентов, изолированные по методологии (BEM, CSS Modules, styled-components).

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

:root {
  --color-primary: #2563eb;
  --space-2: 8px;
  --space-4: 16px;
  --radius-md: 8px;
}

.button {
  background: var(--color-primary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}

[data-theme="dark"] {
  --color-primary: #60a5fa;
}

Где применять

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

Итог: применяйте слоистую архитектуру с токенами и CSS-переменными, если проект растёт и требует единообразия, темизации и переиспользования стилей.