Як CSS впливає на продуктивність?

CSS впливає на продуктивність фронтенду значно сильніше, ніж здається. Він бере участь не тільки в «красі», а й у тому, наскільки швидко браузер може відобразити й оновити сторінку.

---

#1. Блокує рендеринг

Браузер не починає малювати сторінку, поки не завантажить і не розпарсить весь CSS. Це означає, що навіть 1 рядок у <link rel="stylesheet"> може затримати перший піксель.

→ Це називається render-blocking CSS.

---

#2. Ускладнює layout

Чим складніші селектори (.a .b > .c[attr]), чим глибша вкладеність і нестабільніші розміри, тим довше браузеру доводиться перераховувати layout. Це особливо критично під час resize, скролу і анімацій.

---

#3. Тригерить reflow і repaint

Деякі CSS-властивості (наприклад width, height, margin, position) при зміні викликають reflow (повний перерахунок позицій). Інші (color, background, visibility) викликають лише repaint. А найлегші (transform, opacity) обходяться без цього і ідеальні для анімацій.

→ Якщо CSS-анімації зроблені не через transform/opacity, вони можуть лагати.

---

#4. Додає невикористаний код

Великі CSS-файли, у яких лише 10% стилів реально застосовуються на сторінці, тягнуть зайві байти, заважають оптимізації і парсингу.

→ Аналіз через Coverage в DevTools допомагає знайти зайве.

---

#5. Впливає на CLS (Cumulative Layout Shift)

Якщо зображення, шрифти або блоки завантажуються із затримкою, а CSS не задає чіткі розміри, елементи «стрибають» після завантаження. Це псує UX і SEO.

---

Висновок: CSS - не просто стилі. Це частина рендер-пайплайну браузера. Добре написаний CSS = швидкий, стабільний, відзивчивий інтерфейс. Поганий CSS = лаги, смикання, білі екрани і фрустрація.