CSS и дизайн-системы

01Идея: решения, а не значения

Представьте дизайн-систему как свод правил бренда. Сырое значение вроде #0f62fe ничего не говорит; токен --color-accent сообщает, для чего он нужен. Обычно токены делятся на два слоя. Примитивные токены описывают палитру (--blue-600, --gray-100). Семантические токены описывают назначение (--color-accent, --color-surface, --color-text-muted) и ссылаются на примитивы. Компоненты используют только семантические токены. Именно это одно правило делает темизацию и редизайн дешёвыми: вы меняете, на что указывает --color-surface, и за ним следуют все карточки, модальные окна и поля ввода. Токены — это не только цвет: отступы, размеры шрифтов, межстрочные интервалы, радиусы, тени, слои z-index, длительности и кривые анимации тоже живут в том же файле.

1:root {
2  /* primitives */
3  --gray-50: #f7f7f8;
4  --gray-900: #16161a;
5  --blue-600: #2952e3;
6 
7  /* semantic: components use only these */
8  --color-bg: var(--gray-50);
9  --color-text: var(--gray-900);
10  --color-accent: var(--blue-600);
11  --radius-md: 0.5rem;
12  --duration-fast: 150ms;
13}

02Шкалы отступов и типографики

Шкала — это короткий фиксированный список допустимых размеров. Вместо 13px здесь и 15px там вы выбираете шаги вроде 4, 8, 12, 16, 24, 32, 48, 64 для отступов и модульное соотношение (например, 1.2 или 1.25) для размеров шрифта. Меньше вариантов — быстрее решения и заметный ритм. Fluid-типографика использует clamp(), чтобы заголовки плавно росли между минимумом и максимумом без брейкпоинтов: clamp(2rem, 1.2rem + 3vw, 3.5rem). Задавайте размеры шрифтов в rem, чтобы уважать настройку шрифта в браузере пользователя, а line-height оставляйте без единиц (1.5 для основного текста, от 1.1 до 1.2 для крупных заголовков).

• Отступы: базовая сетка 4px или 8px, токены от --space-1 до --space-10.
• Типографика: для большинства продуктов хватает 6–8 шагов.
• Fluid: clamp(min, preferred, max) для заголовков и отступов секций.
• Никогда не позволяйте компоненту придумывать размер, которого нет в шкале.

03Темизация: светлая, тёмная и бренды

Поскольку компоненты читают семантические токены, тема — это просто другой набор значений для тех же имён. Тёмная тема может следовать настройке операционной системы через prefers-color-scheme или выбору пользователя, сохранённому в атрибуте data-theme на элементе html. В современном CSS есть ещё функция light-dark(), которая выбирает одно из двух значений в зависимости от свойства color-scheme, так что многие токены можно описать один раз. Для white-label продуктов каждый бренд — это ещё один набор токенов, подключаемый на корневом элементе. Ставьте атрибут темы на сервере или в крошечном inline-скрипте до первой отрисовки, иначе пользователь увидит вспышку неправильной темы.

1:root {
2  color-scheme: light dark;
3  --color-bg: light-dark(#ffffff, #121214);
4  --color-text: light-dark(#16161a, #ececf1);
5}
6 
7/* explicit user choice wins over the OS setting */
8[data-theme="dark"] { color-scheme: dark; }
9[data-theme="light"] { color-scheme: light; }

04CSS Modules vs styled-components vs Tailwind

На любом из трёх можно построить хорошую дизайн-систему; они различаются тем, где живут стили и что выполняется в рантайме. CSS Modules — это обычные CSS-файлы с локально изолированными именами классов, компилируемые на этапе сборки, без затрат в рантайме и с полной поддержкой React Server Components. styled-components — это CSS-in-JS: стили живут в компоненте и могут реагировать на пропсы, но генерируются в браузере и зависят от React-контекста, поэтому в Next.js App Router им нужны клиентские компоненты и style registry для SSR. С 2025 года проект находится в режиме поддержки и не лучший выбор по умолчанию для новых RSC-проектов. Tailwind — utility-first: вы собираете классы вроде px-4 text-sm прямо в разметке. Версия 4 задаёт токены в CSS через @theme, генерирует только используемые классы и отлично работает с серверными компонентами.

• CSS Modules: настоящий CSS, ноль рантайма, безопасно для RSC; имена придумываете сами.
• styled-components: динамические пропсы и стили рядом с компонентом; цена в рантайме, в RSC — только на клиенте.
• Tailwind: очень быстрая разработка, крошечный итоговый CSS, безопасно для RSC; длинные списки классов требуют дисциплины.
• Zero-runtime CSS-in-JS (vanilla-extract, Panda, StyleX) — где-то посередине.

05Библиотеки компонентов

Файл токенов — это фундамент; библиотека компонентов — дом, построенный на нём. Начинайте со скучных, но самых используемых частей: Button, Input, Select, Checkbox, Modal, Toast, Card и примитивов раскладки Stack и Grid. У каждого компонента должен быть небольшой типизированный API (variant, size, disabled), а не приём произвольных стилей — так система остаётся единообразной. Для сложных интерактивных виджетов (диалоги, меню, комбобоксы) опирайтесь на headless-примитивы с готовой доступностью, такие как Radix, React Aria или Ark UI, а не пишите ловушки фокуса и обработку клавиатуры сами. Документируйте каждый компонент живыми примерами и версионируйте общие пакеты по semver, чтобы ломающее изменение в кнопке не стало сюрпризом для десяти приложений-потребителей.

1// Button/index.tsx - a small, closed API
2import s from "./style.module.css";
3 
4type Props = {
5  variant?: "primary" | "ghost";
6  size?: "sm" | "md";
7} & React.ButtonHTMLAttributes<HTMLButtonElement>;
8 
9export function Button({ variant = "primary", size = "md", className, ...rest }: Props) {
10  const cls = [s.button, s[variant], s[size], className].filter(Boolean).join(" ");
11  return <button className={cls} {...rest} />;
12}

06Адаптивная стратегия и container queries

Выберите один список брейкпоинтов, храните его в одном месте и используйте везде. Mobile-first (min-width) или desktop-first (max-width) — менее важно, чем последовательность. Media queries отвечают на вопрос «какой ширины экран?». Container queries отвечают на более правильный для компонентов вопрос: «какой ширины блок, в котором я нахожусь?». Карточка товара может переключиться с вертикальной раскладки на горизонтальную, когда её контейнер достаточно широк, — неважно, стоит она в сайдбаре или в сетке на всю ширину. Container queries и единица cqi поддерживаются всеми современными браузерами. Используйте и внутренне адаптивные раскладки: grid с repeat(auto-fill, minmax(16rem, 1fr)) часто вообще избавляет от брейкпоинтов.

1.cardWrap {
2  container-type: inline-size;
3}
4 
5.card {
6  display: grid;
7  gap: var(--space-3);
8}
9 
10@container (min-width: 28rem) {
11  .card { grid-template-columns: 10rem 1fr; }
12}

07Советы для продакшена

Охраняйте систему инструментами, а не памятью. Stylelint может запретить сырые hex-цвета и значения в px вне файла токенов. Каскадные слои (@layer reset, tokens, components, utilities) делают специфичность предсказуемой, и !important больше не нужен. Изменяйте токены только добавлением: переименование или удаление токена — ломающее изменение, поэтому сначала вводите новый, мигрируете, потом удаляете старый. Тестируйте компоненты на реальных брейкпоинтах и с длинными переведёнными строками, потому что немецкий, русский или армянский текст ломает вёрстку, которая на английском выглядит нормально. И наконец, проверяйте контраст для каждой пары токенов текста и фона в обеих темах.

• Правило линтера: никаких hex и px вне токенов.
• Используйте @layer вместо !important.
• Сначала добавьте токены, мигрируйте, потом удаляйте.
• Тестируйте с самой длинной локалью и на каждом брейкпоинте.

08Каскадные слои: архитектура для специфичности

Каскадные слои (@layer) решают, какая группа стилей побеждает, ещё до того, как браузер сравнивает специфичность. Вы один раз объявляете порядок, например reset, vendor, tokens, base, components, utilities, и любое правило в более позднем слое побеждает любое правило в более раннем, какой бы специфичный селектор у него ни был. Это заканчивает гонку длинных селекторов и !important. Три детали часто подводят. Стили вне слоёв побеждают все стили в слоях, поэтому чужой CSS, который вы не контролируете, нужно импортировать в нижний слой через @import url(...) layer(vendor), иначе он молча победит. !important переворачивает порядок: важное объявление в раннем слое побеждает важное объявление в позднем, и это позволяет reset-слою защитить правила доступности. И порядок фиксируется в момент, когда имя слоя встречается впервые, поэтому объявляйте полный список в самом начале входного файла стилей, до любого импорта.

1@layer reset, vendor, tokens, base, components, utilities;
2 
3@import url("datepicker.css") layer(vendor);
4 
5@layer components {
6  .button { background: var(--color-accent); }
7  .card .button.primary { background: var(--color-accent-strong); }
8}
9 
10@layer utilities {
11  /* wins over both rules above, despite lower specificity */
12  .bg-surface { background: var(--color-surface); }
13}

09Цвет, который можно вычислить: OKLCH, color-mix() и относительные цвета

Hex и HSL плохо подходят для построения шкал. Два цвета HSL с одинаковым значением lightness могут выглядеть совершенно по-разному по яркости, поэтому сгенерированные оттенки непредсказуемо проваливают проверку контраста. OKLCH описывает цвет через воспринимаемую светлоту, хрому (насыщенность) и тон, поэтому шаги светлоты от 0.95 до 0.25 дают ровную на вид шкалу, а о контрасте становится проще рассуждать. Современный CSS умеет и вычислять цвета прямо в браузере. color-mix(in oklch, var(--brand), black 15%) делает hover-оттенок из любого цвета бренда, а синтаксис относительных цветов, oklch(from var(--brand) l c h), позволяет поменять один канал и сохранить остальные. Всё это работает в актуальных версиях основных браузеров. Практическая выгода — white-label: клиент даёт один-два цвета бренда, а система вычисляет состояния hover, pressed, мягкий фон и рамку. Вычисленные цвета — отправная точка, а не гарантия, поэтому всё равно проверяйте каждую пару текста и фона на контраст по WCAG.

1:root {
2  --brand: oklch(0.58 0.17 255);
3 
4  --color-accent: var(--brand);
5  --color-accent-hover: color-mix(in oklch, var(--brand), black 15%);
6  --color-accent-subtle: oklch(from var(--brand) 0.95 calc(c * 0.3) h);
7  --color-accent-border: oklch(from var(--brand) calc(l + 0.15) c h);
8  --color-on-accent: oklch(0.99 0 0);
9}
10 
11[data-brand="b"] {
12  --brand: oklch(0.62 0.19 25); /* the only value a new brand changes */
13}

10Токены как пайплайн, а не файл

В одном приложении достаточно одного файла tokens.css. Когда есть несколько веб-приложений, нативное мобильное приложение и дизайн-инструмент, токены становятся продуктом со своими потребителями. Источником истины тогда служит JSON-файл в формате W3C Design Tokens Community Group (DTCG), у которого вышла первая стабильная версия 2025.10 и который понимают плагины Figma и инструменты сборки. Трансформер вроде Style Dictionary превращает этот источник в CSS custom properties, типизированный объект TypeScript для автодополнения и константы Swift или Kotlin для мобильных приложений. Относитесь к пакету как к любому публичному API: семантическое версионирование, changelog и депрекации, при которых старое имя остаётся алиасом на одну мажорную версию, а lint-правило предупреждает о его использовании. Запускайте скриншот-тесты (например, Storybook с сервисом визуального сравнения) на каждое изменение токенов, потому что одно значение может сдвинуть сотни компонентов сразу.

1{
2  "color": {
3    "blue-600": {
4      "$type": "color",
5      "$value": { "colorSpace": "srgb", "components": [0.145, 0.388, 0.922], "hex": "#2563eb" }
6    },
7    "accent": { "$type": "color", "$value": "{color.blue-600}" }
8  },
9  "space": {
10    "4": { "$type": "dimension", "$value": { "value": 1, "unit": "rem" } }
11  }
12}

11Стоимость CSS во время выполнения на больших масштабах

Производительность CSS редко важна, пока на странице нет тысяч элементов; тогда несколько вещей начинают стоить реального времени. Пересчёт стилей: изменение custom property на :root, например при смене темы, инвалидирует стили каждого элемента, который её наследует. Один раз на клик — нормально; анимировать корневую переменную каждый кадр — нет, поэтому ограничивайте анимируемые переменные элементом, который их использует. Регистрируйте анимируемые переменные через @property с inherits: false: так у них появляется настоящий тип, они плавно интерполируются, а изменение не расходится каскадом по дереву. Неиспользуемый CSS: глобальная таблица стилей только растёт, поэтому предпочитайте CSS на уровне компонентов (CSS Modules или Tailwind, который генерирует только найденные классы) и проверяйте панель Coverage в DevTools. Работа вне экрана: content-visibility: auto вместе с contain-intrinsic-size позволяет браузеру пропускать layout и paint для длинных секций ниже первого экрана. Сопоставление селекторов редко бывает узким местом; прежде чем переписывать селекторы, измерьте их через selector stats в панели Performance.

1@property --progress {
2  syntax: "<percentage>";
3  inherits: false;
4  initial-value: 0%;
5}
6 
7.meter {
8  background: linear-gradient(90deg, var(--color-accent) var(--progress), transparent 0);
9  transition: --progress 300ms ease-out;
10}
11 
12.long-section {
13  content-visibility: auto;
14  contain-intrinsic-size: auto 800px;
15}