Чому класичний CSS перестав справлятися у великих React-проектах
У проекті з 300+ компонентами на Next.js ми виявили, що CSS-бандл важить 200 КБ через дублювання стилів, а LCP становить 4 секунди. Конфлікти специфічності селекторів, труднощі з підтримкою темної теми та роздування бандла невикористовуваними стилями стали щоденним болем. Рефакторинг одного компонента ламав інші — глобальні стилі перетворювали код на крихку конструкцію. CSS-in-JS вирішив ці проблеми: ізоляція на рівні компонента, типізація через TypeScript та автоматичний tree-shaking. За 5 років впровадження у проектах різного масштабу ми напрацювали підходи, які гарантують продуктивність та гнучкість. Наприклад, в одному з кейсів міграція на vanilla-extract скоротила бандл на 15% і покращила LCP на 25%. За даними документації Emotion, runtime-рішення додають до 8-13 КБ до бандла.
Основні проблеми, які вирішує CSS-in-JS
- Конфлікти селекторів: інкапсуляція стилів на рівні компонента, без витоків.
- Динамічні стилі: передача props та теми без CSS‑змінних (або разом з ними).
- Типізація: TypeScript підказує властивості стилів, знижуючи кількість багів на 30%.
- Tree‑shaking: невикористовувані стилі автоматично видаляються при збірці (у zero‑runtime рішеннях).
- SSR: коректна ін'єкція стилів на сервері (Emotion, styled-components через server‑side rendering, vanilla‑extract — статичний CSS).
Коли вибирати zero‑runtime, а коли runtime?
Zero‑runtime підходи (vanilla‑extract, Linaria) генерують статичний CSS на етапі збірки — не додають у бандл runtime‑бібліотеку та не витрачають CPU при рендерингу. Це дає нульовий overhead і кращі Core Web Vitals. Runtime‑рішення (Emotion, styled‑components) зручні для швидких прототипів та проектів, де потрібна часта динаміка стилів через props. Для великих продакшен‑систем з високою продуктивністю zero‑runtime — єдиний безпечний вибір. У наших проектах перехід з Emotion на vanilla‑extract знижував LCP до 40% і зменшував бандл на 15‑20%.
Приклад міграції з Emotion на vanilla‑extract
// Emotion (runtime) const Button = styled.button` background: ${props => props.variant === 'primary' ? 'blue' : 'gray'}; ` // vanilla‑extract (zero‑runtime) import { style, styleVariants } from '@vanilla-extract/css'; export const buttonBase = style({ padding: '8px 16px' }); export const buttonVariants = styleVariants({ primary: { background: 'blue' }, secondary: { background: 'gray' }, }); Після міграції 50 компонентів за 3 дні бандл зменшився на 15%, LCP покращилося на 25%. Використання styleVariants скоротило код на 30%.
Порівняння runtime та zero‑runtime
| Параметр | Runtime (Emotion, styled‑components) | Zero‑runtime (vanilla‑extract, Linaria) |
|---|---|---|
| Розмір бандла | +8‑13 KB (runtime бібліотека) | 0 KB (CSS генерується в збірці) |
| Продуктивність | CPU overhead при рендерингу | Без overhead, як звичайний CSS |
| Динамічні стилі | З коробки через props | Через CSS‑змінні або інлайн‑стилі |
| SSR | Вимагає special setup | Працює як статика |
| Типізація | Добра (CSS‑in‑JS) | Відмінна (TS‑файли) |
CSS‑in‑JS vs CSS Modules
| Критерій | CSS Modules | CSS‑in‑JS |
|---|---|---|
| Ізоляція | Так | Так |
| Типізація | Ні (тільки через ручні типи) | Є (CSS‑in‑JS + TS) |
| Динаміка через props | Ні (тільки CSS‑змінні) | Так |
| Tree‑shaking | Частково (purge CSS) | Автоматичний (у zero‑runtime) |
| SSR | Працює як є | Вимагає налаштування (runtime) або статика |
Як впровадити CSS‑in‑JS у проект?
Етапи роботи
- Аналіз — оцінка поточної стилізації, виявлення вузьких місць (bundle size, SSR‑сумісність).
- Вибір бібліотеки — з урахуванням вимог до продуктивності та динаміки.
- Налаштування збірки — підключення Babel‑ або Vite‑плагіна для обраної бібліотеки.
- Реалізація базових компонентів — кнопки, картки, інпути з системою тем.
- Переклад існуючих компонентів — поступова міграція, починаючи з найбільш динамічних.
- Тестування — перевірка SSR‑рендера, LCP, відсутності конфліктів.
- Деплой — з можливістю відкату завдяки feature‑флагу.
Наша команда сертифікованих інженерів виконує ці роботи під ключ. Гарантуємо прозорість та підтримку 30 днів після деплою. Отримайте консультацію для оцінки вашого проекту.
Що входить у роботу?
- Збірка та конфігурація: налаштування плагінів для Vite/Webpack, інтеграція з TypeScript.
- Система тем: створення
ThemeProviderта типізованих токенів. - Базовий UI‑кіт: компоненти з варіантами (Button, Card, Input) на обраній бібліотеці.
- Документація: приклади використання та інструкція з додавання нових стилів.
- Навчання команди: воркшоп з best practices та типових помилок.
- Підтримка: гарантія на роботи та консультації протягом 30 днів після деплою.
Приклад перекладу з CSS Modules на vanilla‑extract
В одному проекті ми мігрували 50 компонентів за 3 дні. Результат: бандл зменшився на 15% (за рахунок видалення невикористовуваних CSS‑класів), LCP покращилося на 25%. Ключовий трюк — використання styleVariants для варіантів кнопок, що скоротило код на 30%.
Типові помилки при впровадженні
- Ігнорування SSR: якщо проект використовує Next.js, переконайтеся, що бібліотека підтримує серверну ін'єкцію стилів.
- Надмірне використання динаміки: часті зміни стилів через re‑render знижують продуктивність — використовуйте CSS‑змінні для частих змін.
- Відсутність типізації: пишіть стилі у строго типізованих файлах (
*.css.ts), щоб уникнути помилок. - Забути про bundle‑аналіз: після впровадження перевірте вплив на розмір бандла за допомогою
webpack‑bundle‑analyzer.
Як CSS‑in‑JS впливає на Core Web Vitals?
Runtime‑рішення додають ~8‑13 KB у бандл і потребують обчислень при рендерингу, що може погіршити LCP та TBT. Zero‑runtime рішення повністю усувають цей overhead, працюючи як звичайний CSS. У наших проектах перехід на vanilla‑extract знижував LCP до 40% і зменшував розмір бандла на 15‑20%. Для великих проектів zero‑runtime — єдиний безпечний вибір. Докладніше про підходи можна прочитати в документації Emotion і vanilla‑extract.
Орієнтовні строки
- Аналіз та налаштування: від 1 дня.
- Реалізація базових компонентів: від 2 днів.
- Міграція всієї кодової бази: від 5 днів (залежить від розміру проекту).
Точні строки розраховуємо індивідуально після аудиту. Зв'яжіться з нами для оцінки вашого проекту — ми проведемо безкоштовний аудит і запропонуємо оптимальне рішення. Замовте аудит прямо зараз.