GitHub делится опытом отказа от CSS-in-JS
Как GitHub заменил runtime CSS-in-JS на utility-классы и улучшил размер бандлов, INP и LCP.
В инженерном блоге GitHub выкатил подробный разбор того, как они перевели ключевые страницы с styled-components и runtime CSS-in-JS на серверный CSS с utility-классами.
Причина классическая — перформанс. По мере роста Primer React (их дизайн-системы) сгенерированный CSS начал раздуваться, а runtime-накладные расходы на парсинг и внедрение стилей в JS стали ощутимо тормозить гидрацию и рендеринг.
Что сделали:
- Шипят больше CSS, но меньше JS. Перешли на заранее скомпилированные utility-классы и атрибуты.
- Убрали runtime-вычисления. Стили больше не генерируются на лету в браузере пользователя.
- Сохранили DX. Разработчики по-прежнему пишут компоненты на React, но под капотом вместо JS-функций генерации стилей работают атомарные классы.
Результаты в цифрах:
-58%к размеру JS-бандла на дашборде.-80%к объёму CSS (благодаря переиспользованию атомарных utility-классов вместо дублирования правил для каждого компонента).- Ощутимый буст по метрикам INP (Interaction to Next Paint) и LCP.
Главный вывод:
Runtime CSS-in-JS был крутой концепцией для своего времени и дал огромный толчок DX, но для сложных продуктов на масштабах GitHub он стал узким местом. Тренд на Zero-Runtime (Panda CSS, StyleX) или классический/атомарный CSS продолжается.