Реализация Atomic CSS подхода для стилей сайта

Реализация Atomic CSS подхода для стилей сайта

Atomic CSS — методология, при которой каждый CSS-класс выполняет ровно одну задачу: один класс — одно свойство. mt-4 означает margin-top: 1rem. text-center — text-align: center. Компонент собирается из множества таких классов прямо в HTML/JSX.

Это то, что лежит в основе Tailwind CSS, Windi CSS, UnoCSS. Но Atomic CSS — шире: это подход, который можно реализовать вручную или выбрав нужный инструмент под конкретные ограничения.

Ручная реализация Atomic CSS

Полезно понимать механику перед использованием фреймворка:

/* Spacing */
.m-0  { margin: 0; }
.m-1  { margin: 4px; }
.m-2  { margin: 8px; }
.m-4  { margin: 16px; }
.mt-2 { margin-top: 8px; }
.mb-4 { margin-bottom: 16px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }

/* Flexbox */
.flex      { display: flex; }
.flex-col  { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2     { gap: 8px; }
.flex-1    { flex: 1; }

/* Typography */
.text-sm   { font-size: 14px; }
.text-base { font-size: 16px; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }
.text-center { text-align: center; }
.truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Colors */
.text-primary { color: var(--color-primary); }
.bg-white  { background-color: #fff; }
.border    { border: 1px solid var(--color-border); }
.rounded   { border-radius: var(--radius-md); }

/* States */
.opacity-50   { opacity: 0.5; }
.cursor-not-allowed { cursor: not-allowed; }
.pointer-events-none { pointer-events: none; }

Компонент:

<button class="flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-white rounded cursor-pointer">
  Сохранить
</button>

UnoCSS — нулевой runtime, максимальная гибкость

UnoCSS — движок для генерации атомарных CSS-классов. Не имеет предопределённых стилей — только правила. Поддерживает Tailwind-совместимые пресеты, иконки через Iconify, пользовательские правила.

npm install -D unocss

// vite.config.ts
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    UnoCSS({
      presets: [
        presetUno(),          // Tailwind-совместимые классы
        presetAttributify(),   // class="flex items-center" → flex items-center=""
        presetIcons({          // i-heroicons-check inline SVG иконки
          scale: 1.2,
          warn: true,
        }),
      ],
      theme: {
        colors: {
          primary: '#2563eb',
          'primary-dark': '#1d4ed8',
        },
        borderRadius: {
          DEFAULT: '8px',
          lg: '12px',
        },
      },
      // Кастомные правила
      rules: [
        ['truncate-2', { overflow: 'hidden', display: '-webkit-box', '-webkit-line-clamp': '2', '-webkit-box-orient': 'vertical' }],
        [/^grid-cols-(\d+)$/, ([, n]) => ({ 'grid-template-columns': `repeat(${n}, minmax(0, 1fr))` })],
      ],
      // Шорткаты
      shortcuts: {
        'btn': 'inline-flex items-center gap-2 px-4 py-2 rounded font-medium transition-colors',
        'btn-primary': 'btn bg-primary text-white hover:bg-primary-dark',
        'card': 'bg-white rounded-lg border border-gray-200 p-6 shadow-sm',
      },
    }),
  ],
})

// main.ts — импорт в entry point
import 'virtual:uno.css'

Организация атомарного кода

Проблема атомарного подхода — длинные строки классов трудно читать. Решения:

1. CVA (Class Variance Authority) для компонентов:

import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const buttonVariants = cva(
  // базовые классы
  'inline-flex items-center gap-2 rounded font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none',
  {
    variants: {
      variant: {
        primary: 'bg-blue-600 text-white hover:bg-blue-700',
        secondary: 'bg-transparent text-blue-600 border-2 border-blue-600 hover:bg-blue-50',
        ghost: 'bg-transparent text-slate-700 hover:bg-slate-100',
        destructive: 'bg-red-600 text-white hover:bg-red-700',
      },
      size: {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-sm',
        lg: 'px-6 py-3 text-base',
      },
    },
    defaultVariants: {
      variant: 'primary',
      size: 'md',
    },
  }
)

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

function Button({ variant, size, className, ...props }: ButtonProps) {
  return (
    <button className={cn(buttonVariants({ variant, size }), className)} {...props} />
  )
}

2. clsx/tailwind-merge для условных классов:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

// cn — стандартная утилита, объединяет классы без дублей
export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs))
}

// Использование:
<div className={cn(
  'rounded border p-4',
  isActive && 'border-blue-500 bg-blue-50',
  hasError && 'border-red-500 bg-red-50',
  className
)} />

3. Вынесение в константы:

const styles = {
  container: 'max-w-7xl mx-auto px-4 sm:px-6 lg:px-8',
  section: 'py-16 sm:py-24',
  heading: 'text-3xl font-bold text-slate-900 tracking-tight',
  subheading: 'mt-4 text-lg text-slate-600 max-w-2xl',
} as const

Purging — только используемые классы

При статическом анализе (Tailwind, UnoCSS) в финальный CSS попадают только те классы, которые найдены в коде:

// tailwind.config.ts
export default {
  content: [
    './src/**/*.{ts,tsx,html}',
    './components/**/*.{ts,tsx}',
  ],
}

Это уменьшает размер CSS с ~3MB до 5–30KB для типичного проекта.

Что входит в работу

Выбор и настройка инструмента (Tailwind CSS, UnoCSS или ручная реализация), конфигурация тем и кастомных токенов, настройка CVA для компонентов с вариантами, настройка purging, миграция существующих компонентов с других методологий.

Срок: 1–2 дня в зависимости от объёма существующей кодовой базы.