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

Вы построите themeable components на tokens, разделите structure/skin и защитите variants и responsive behavior.

До начала достаточно component API design, accessibility и современный CSS. В конце должен появиться не конспект, а Button/Card/Dialog primitives с tokens, темой, container-aware layout и visual tests.

Cascade учитывает origin, layer, specificity и order. CSS Modules дают локальные class names, но global tokens и cascade продолжают работать. Не решайте конфликт постоянным повышением specificity/important; проектируйте layers и ownership.

Рабочая проверка. Разделите reset/base/components/utilities layers.

Типичная поломка. Selector .page .card div span как API компонента.

Raw palette/spacing primitives преобразуются в semantic tokens поверхности, текста, акцента, danger и focus. Components используют semantic layer; тема меняет mapping. Token names описывают роль, не конкретное значение и не component instance без причины.

Рабочая проверка. Перенесите Button colors на semantic custom properties.

Типичная поломка. Hex и magic spacing в каждом component.

Variant props — literal unions, согласованные с CSS recipes. Compound variants описывают реальные сочетания; не генерируйте class names из произвольной пользовательской строки. Размер, tone и emphasis независимы только если все комбинации поддержаны.

Рабочая проверка. Составьте matrix variants/states.

Типичная поломка. className={"button-" + userValue}.

Theme provider задаёт data attribute/class и semantic custom properties. Components остаются теми же; SSR должен выдать начальную theme или ранний script без flash/hydration mismatch. System preference — default, user choice — persisted override с defined policy.

Рабочая проверка. Переключите light/dark без remount subtree.

Типичная поломка. isDark ? <DarkButton> : <LightButton> для каждого component.

Viewport media queries отвечают за глобальную среду, container queries — за доступное место component. Reusable card не должна знать страницу; объявите container и адаптируйте внутренний layout. Используйте logical properties и content-driven breakpoints.

Рабочая проверка. Покажите Card в sidebar и main grid одной ширины viewport.

Типичная поломка. JS window.innerWidth для каждого layout decision.

Motion объясняет изменение и сохраняет continuity, но не задерживает основное действие. CSS transitions предпочтительны простым states; layout/exit choreography требует инструмента и cleanup. prefers-reduced-motion убирает несущественное движение, сохраняя состояние понятным.

Рабочая проверка. Добавьте reduced-motion вариант dialog transition.

Типичная поломка. Анимация 800ms перед доступностью результата.

Headless layer реализует state machine, aria и keyboard; styled layer задаёт tokens/layout. Разделение полезно, если есть несколько visual systems, но требует не разорвать обязательные props/refs. Иногда один integrated component проще и безопаснее.

Рабочая проверка. Соберите styled Select поверх headless contract.

Типичная поломка. Отдать consumer низкоуровневые aria детали без safe defaults.

Screenshot/visual tests ловят layout/color regressions в фиксированных stories и viewports. Они чувствительны к fonts/antialiasing и не доказывают behavior/accessibility. Стабилизируйте environment, маскируйте nondeterministic content и ревьюйте intentional diffs.

Рабочая проверка. Зафиксируйте variants matrix в двух темах.

Типичная поломка. Один screenshot homepage вместо component states.

Создайте mini design system: semantic color/spacing/type tokens, light/dark themes, Button variants, responsive Card grid, focus/disabled/high-contrast states и Storybook-like examples. Не используйте raw hex в components.

Критерий завершения: темы меняются без ветвления JSX, components не зависят от page selectors, contrast/focus/visual states проверены. Сначала зафиксируйте наблюдаемое поведение тестом или измерением, затем меняйте реализацию.