👨‍💻 Почему я больше не использую CSS-in-JS

1️⃣ Рантайм остаётся узким местом

Любой styled-компонент генерирует классы, хеши, вставляет <style> в документ.

Это не бесплатно: инъекция стилей и работа GC заметны на слабых устройствах. На MacBook незаметно, на бюджетных Android — уже да.

const Button = styled.button`
  background: ${p => (p.primary ? 'blue' : 'gray')};
`;

2️⃣ Дебаг становится хаосом

Инспектор показывает:

.css-4kq0lj { margin: 0 auto; }

И теперь ищи, какой из 50 вложенных styled-компонентов это создал.

3️⃣ SSR и гидратация часто ломаются

Небольшое отличие порядка импортов — и хеши на сервере и клиенте расходятся. Гидратация падает, юзер видит FOUC. С этим сталкивался почти каждый.

4️⃣ Современный CSS решает те же задачи проще

CSS Variables, CSS Modules, Container Queries покрывают 90% кейсов CSS-in-JS:

• Никакого рантайма
• Никаких хешей
• Никакого лишнего веса в бандле
• Прозрачный дебаг

.button {
  background: var(--primary-color);
}

Динамика? Меняем --primary-color из JS → браузер обновляет мгновенно.

📌 CSS-in-JS решал проблемы 2017 года: отсутствие переменных, отсутствие модульности и неудобство работы с CSS. В 2025 браузерный CSS стал мощнее, быстрее и надёжнее — и для большинства проектов этого достаточно.

🐸 Библиотека фронтендера

#code_battle