Оптимізація стилів: впровадження атомарного CSS (Tailwind, UnoCSS, CVA)

Ми часто бачимо проєкти, де CSS-файл розрісся до 3-5 МБ, а зміна кольору кнопки перетворюється на квест з specificity. Атомарний CSS вирішує цю проблему радикально: кожен клас — одна властивість. Жодних каскадних конфліктів. Результат: бандл 10-30 КБ, LCP покращується на 20-30%, а розробка нових компонентів прискорюється вдвічі. Середня економія бюджету на CSS-розробку становить 30-50%, а вартість впровадження окупається за 2-3 місяці.

Атомарний CSS — це методологія, при якій mt-4 означає margin-top: 1rem, а text-center — text-align: center. Компонент збирається з безлічі таких класів прямо в HTML/JSX. Це лежить в основі Tailwind CSS, Windi CSS, UnoCSS, але підхід ширший — його можна реалізувати вручну або з будь-яким генератором.

Чому Atomic CSS швидший за традиційні методології?

Традиційні методології (BEM, OOCSS) створюють ієрархічні селектори, що веде до specificity-воєн. Атомарний CSS використовує плоскі селектори з однаковою специфічністю (0,1,0). Це прискорює перерахунок стилів у браузері та спрощує налагодження. У порівнянні з BEM, атомарний CSS зменшує розмір CSS-бандла в 5-10 разів після purge, а швидкість рендерингу (LCP) покращується на 20-30% за рахунок меншого обсягу стилів.

Як налаштувати атомарний 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; } 

Приклад використання: кнопка з класами flex items-center gap-2 px-4 py-2 text-sm font-medium bg-primary text-white rounded cursor-pointer.

Налаштування UnoCSS

UnoCSS — двигун з нульовим рантаймом. Встановлюється як Vite-плагін, підтримує Tailwind-сумісні пресети та кастомні правила.

// vite.config.ts import UnoCSS from 'unocss/vite' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ UnoCSS({ presets: [ presetUno(), presetAttributify(), presetIcons({ 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', }, }), ], }) 

Організація класів за допомогою CVA та clsx

Для керування варіантами компонентів використовуємо Class Variance Authority та clsx з tailwind-merge. Це компонентний підхід, що спрощує підтримку стилів.

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} /> ) } 

Утиліта cn об'єднує класи за допомогою clsx та вирішує конфлікти через tailwind-merge:

import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]): string { return twMerge(clsx(inputs)) } 

Purge CSS

При статичному аналізі у фінальний CSS потрапляють лише використані класи. Приклад конфігурації Tailwind CSS:

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

Це зменшує розмір CSS з ~3MB до 10–30 KB для типового проєкту.

Процес впровадження

1. Аналіз поточної кодової бази — оцінка обсягу стилів, виявлення частих патернів, підрахунок економії від міграції.
2. Вибір інструменту — Tailwind (швидкий старт) або UnoCSS (гнучкість).
3. Конфігурація теми — кольори, відступи, брейкпоінти, кастомні токени.
4. Міграція на атомарний CSS — переписування ключових UI-компонентів на атомарні класи з CVA.
5. Налаштування purge — перевірка, що всі класи збираються.
6. Тестування та деплой — регресійне тестування, замір продуктивності.

Терміни та вартість

Терміни: від 1 до 5 днів залежно від обсягу існуючої кодової бази. Вартість розраховується індивідуально після аудиту. Наші клієнти економлять у середньому до 40% часу розробки за рахунок скорочення обсягу CSS та прискорення створення нових компонентів. Середня економія бюджету на CSS-розробку становить 30-50%, а вартість впровадження окупається за 2-3 місяці. Зверніться до нас за детальним аудитом — ми допоможемо оцінити вигоду для вашого проєкту. Замовте консультацію, і наші інженери підготують план міграції.

Типові помилки при переході на атомарний CSS

• Неправильне налаштування purge: якщо не вказати всі шляхи, частина класів видалиться, і верстка зламається.
• Ігнорування динамічних класів: класи, що формуються через конкатенацію рядків, не потрапляють у purge.
• Відсутність єдиної конфігурації теми: різні компоненти використовують різні відступи, що призводить до розбіжностей.
• Використання inline-стилів разом з атомарними класами — конфлікт пріоритетів.

Що входить у роботу

При замовленні впровадження атомарного CSS ми надаємо:

• Документовану конфігурацію інструменту (Tailwind/UnoCSS).
• Навчання команди (2-годинний workshop з практикою).
• Підтримку протягом 2 тижнів після деплою.
• Доступ до репозиторію з прикладами компонентів.
• Рекомендації щодо подальшої оптимізації.

Отримайте консультацію — ми допоможемо уникнути типових помилок. Замовте впровадження та переконайтеся в ефективності методології на власному проєкті. Звертайтеся до нас — досвід більше 10 років, 50+ успішних проєктів з атомарним CSS. Гарантуємо результат: зменшення CSS-бандла в 10 разів і скорочення часу розробки нових компонентів на 40%.