Оптимізація стилів: впровадження атомарного 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%.

Фронтенд-розробка React: від аудиту до production

Бандл виріс до 3.1 MB gzip — це реальна цифра з проєкту, який прийшов до нас на аудит. Причина: moment.js (72 KB) тягнув локалі для всіх 160 мов, lodash імпортувався цілком замість tree-shake, три компонентні бібліотеки підключено одночасно. TTFB відмінний, але TTI (Time to Interactive) на мобільному — 14 секунд. Користувачі йшли, конверсія впала на 40%. Ми переписали фронтенд: прибрали дублювання бібліотек, впровадили динамічні імпорти та SSR. Результат — бандл зменшився до 850 KB gzip, TTI — 2.1 секунди, LCP — 1.8 с.

Frontend — це не «намалювати красиво». Це продуктивність, типізація, стратегія рендерингу, bundle management і підтримуваність на роки.

Чому Next.js — стандартний вибір для SEO?

React — наш основний UI-фреймворк для складних інтерфейсів. Next.js — стандартний вибір для проєктів з SEO-вимогами або SSR. App Router (з версії 13) приніс React Server Components, streaming та fetch із built-in кешуванням. Це реальні переваги: сторінка каталогу з тисячами товарів рендериться на сервері без відправки логіки фільтрації на клієнт, JS-бандл менший на 30%.

Але App Router — інший спосіб мислення. "use client" потрібно ставити свідомо. Реальна помилка: розробник позначає весь layout як "use client" через один стан навігації — і втрачає всі переваги RSC. Правило: тримати Server Components якомога вище в дереві, "use client" — тільки для інтерактивних листових компонентів. ISR (Incremental Static Regeneration) — потужний інструмент для контентних сайтів. На каталозі з 50 000 сторінок з ISR та CDN — TTFB < 50 ms для будь-якої сторінки.

Як TypeScript запобігає багам у продакшені?

TypeScript обов'язковий на будь-якому проєкті, який планується підтримувати довше 3 місяців або в команді більше одного розробника. Аргумент «пишемо швидко без типів» працює лише перші 2 тижні. Після — баги, пов'язані з невизначеними значеннями, виникають щотижня.

Конкретна користь: рефакторинг API-відповіді — змінив тип в одному місці, TypeScript показує всі місця, де потрібно адаптувати код. Без типів — баг у продакшені через тиждень. strict: true в tsconfig.json — обов'язково. noImplicitAny, strictNullChecks, strictFunctionTypes. Біль від Type 'undefined' is not assignable у розробці коштує менше, ніж Cannot read properties of undefined у продакшені. tRPC — end-to-end типізація від бекенду до фронтенду без окремої схеми — змінюючи тип процедури, ви одразу бачите місця на фронтенді, що потребують правки.

Vue 3 + Nuxt 3 — альтернативний стек для SSR

Vue 3 з Composition API — інший стиль розробки, ближчий до React Hooks. <script setup> та composables роблять код більш перевикористовуваним. Nuxt 3 — фреймворк для Vue з SSR/SSG, аналогічний Next.js. useAsyncData та useFetch — вбудовані composables з дедуплікацією запитів та hydration. Auto-imports зручні, але можуть заплутувати при debug. Nuxt Content — модуль для Markdown/MDX-файлів, ідеальний для документації.

Hydration mismatch — специфічний біль SSR на Vue та React. Рішення: <ClientOnly> компонент для браузерного контенту, suppressHydrationWarning для dynamic timestamps.

Продуктивність: метрики та інструменти

Bundle analysis — стартова точка. @next/bundle-analyzer або rollup-plugin-visualizer — запускаємо перед кожним мажорним деплоєм. Мета: жодна сторінка не повинна вимагати > 200 KB JS gzip для first paint.

Динамічні імпорти для важких компонентів:

const RichEditor = dynamic(() => import('@/components/RichEditor'), {
  ssr: false,
  loading: () => <EditorSkeleton />,
});

Редактор (Tiptap, Quill, CodeMirror) — типові кандидати на dynamic import. Без цього вони потрапляють в основний бандл. React DevTools Profiler — для пошуку зайвих ре-рендерів. React.memo, useMemo, useCallback — точкові інструменти. Передчасна мемоізація всього підряд додає overhead без користі. Профілюйте спочатку, оптимізуйте потім.

Віртуалізація довгих списків: @tanstack/virtual або react-window рендерять лише видимі елементи. Таблиця з 50 000 рядків: з віртуалізацією — 60fps, без — браузер зависає при скролі.

State management: без овериніжирингу

Для більшості додатків достатньо:

• React Query / TanStack Query — для серверного стану (дані з API, кешування, інвалідація)
• Zustand — для глобального клієнтського стану (легковаговий, без boilerplate Redux)
• React Hook Form — для форм

Redux Toolkit виправданий для дуже складного глобального стану з великою кількістю взаємодій. Для більшості задач — це overkill. Recoil, Jotai — атомарні підходи для незалежних шматків стану.

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

Tailwind CSS останньої версії — наш стандартний вибір для нових проєктів. Utility-first, відмінна інтеграція з компонентними бібліотеками (Radix UI, Headless UI), PostCSS pipeline. CSS Modules — альтернатива, коли потрібна більш явна ізоляція стилів. Radix UI + Tailwind (Shadcn/ui паттерн) — headless компоненти з повним контролем над стилями. Немає dependency lock-in: компоненти копіюються в проєкт і повністю кастомізуються. Storybook — для документування компонентної бібліотеки. React DevTools Profiler — офіційний інструмент від команди React.

Тестування

E2E тести через Playwright — для checkout, авторизації, критичних форм. Не для всього підряд: підтримка великої e2e-сюїти дорога, тому обираємо 3-5 ключових сценаріїв.

Орієнтири за термінами та складом робіт

Вартість розраховується після декомпозиції на компоненти, екрани та інтеграції з API. Ми використовуємо N+1 оцінку: додаємо 20% на ризики.

Що входить в роботу: вихідний код в Git, документація по архітектурі та компонентах, доступ до CI/CD, навчання вашої команди (2-3 зустрічі), гарантія 3 місяці на виявлені баги. Додатково — покриття юніт-тестами ключових модулів.

У нас 5 років досвіду у фронтенд-розробці, понад 50 виконаних проєктів, команда з 10 інженерів, що володіють React, Vue, Angular. Працюємо з технологіями, описаними в документації React та TypeScript. Додаткові відомості можна знайти в Wikipedia: React та Wikipedia: TypeScript.

Який стек обрати для фронтенд-розробки React?

Ми порівнюємо інструменти за реальними метриками. Next.js швидший за Nuxt у збірці SSR на 20–30% при однаковому розмірі сторінки. TypeScript знижує кількість production-багів на 60–70% у порівнянні з JavaScript. Економія на підтримці такого проєкту — значна за рахунок скорочення часу на налагодження. Якщо вам потрібен легкий SPA з мінімальною вартістю — достатньо React + Vite. Для контентного сайту з SEO — Next.js з ISR дає TTFB нижче 50 мс навіть при 50 000 сторінок.

Отримайте консультацію по вашому проєкту: оцінимо поточний код і запропонуємо план оптимізації. Замовте аудит — знайдемо вузькі місця та покажемо, як скоротити бюджет без втрати якості.