В июне 2026 года GitHub завершила перевод сайта на CSS Modules, полностью отказавшись от CSS-in-JS, включая styled-components, styled-system и свойства sx. Компания утверждает, что этот переход сократил время серверного рендеринга на 55%, а также уменьшил время, необходимое для инициализации компонентов на странице, на 25%.
Этот шаг стал ответом на рост числа компонентов на некоторых страницах GitHub с 2023 года. Предыдущее решение требовало инициализации стилей на клиенте, увеличивало стоимость сбора стилей во время серверного рендеринга, а также усложняло обновление оформления по мере роста числа компонентов на странице.
Почему GitHub выбрала CSS Modules?
CSS Modules позволяют писать стили в CSS-файлах рядом с исходным кодом компонента, при этом имена классов по умолчанию становятся локальными, что снижает вероятность конфликтов. В данном случае особенно важно то, что они устраняют необходимость в поведении во время выполнения на клиенте или сервере: стили собираются в CSS-файлы, отправляемые вместе с HTML-кодом страницы.
Процесс перехода начался с дизайн-системы Primer. Команда добавила CSS Modules для каждого компонента, связала компоненты с флагами функций, позволявшими переключаться между старым и новым подходами, а затем использовала тесты визуальной регрессии для проверки совпадения результатов. После этого переход постепенно расширялся: сначала от команды Primer к сотрудникам GitHub, а затем ко всем пользователям.
К декабрю 2024 года все компоненты Primer перешли на CSS Modules. Однако этого было недостаточно, поскольку значительные части кодовой базы GitHub по-прежнему использовали свойство sx для настройки компонентов с помощью встроенных объектов. Хотя этот подход обеспечивал хорошую интеграцию с TypeScript и токенами дизайна, его динамическая природа повышала стоимость выполнения и усложняла масштабирование по мере роста числа компонентов.
Управление масштабным переходом
Чтобы не нарушить существующие варианты использования, GitHub создала промежуточную библиотеку под названием @primer/styled-react. Эта библиотека позволила продолжать использовать sx с компонентами, переведёнными на CSS Modules, тогда как маршруты, которым sx не требовалось, могли импортировать компоненты непосредственно из @primer/react.
Процесс удаления sx начался в апреле 2025 года, когда насчитывалось около 7 760 использований этого свойства. С помощью внутреннего расширения для VS Code и инструмента codemod группа из восьми инженеров перенесла 6 419 использований за шесть месяцев, получив прирост времени серверного рендеринга от 1% до 22% на некоторых страницах. В апреле 2026 года число использований сократилось с 895 до нуля за три недели при участии двух инженеров и использовании агентов программирования в GitHub Copilot.
Визуальные темы оставались дополнительной проблемой: GitHub поддерживает семь тем, каждая из которых имеет режим высокой контрастности, а некоторые части этой системы были связаны с styled-components. Поэтому команда также перенесла использования JavaScript и инструменты тем, сохранив определения цветовых переменных в CSS.
Что этот опыт означает для разработчиков?
Цифры GitHub показывают, что отказ от логики стилизации во время выполнения может дать ощутимый прирост производительности при разрастании пользовательских интерфейсов. Однако наиболее важна в этом опыте не сама выборка CSS Modules, а способ реализации: поэтапная совместимость, флаги функций, визуальные тесты, постепенное развертывание и автоматизация, допускающая проверку.
В то же время этот процесс показывает, что переход с CSS-in-JS не сводится к замене формата записи стилей. Потребовалось удалить свойства sx, отвязать темы от styled-components и на протяжении длительного времени сохранять совместимость компонентов. Поэтому результаты не доказывают, что каждый проект получит такие же преимущества: они связаны с масштабом GitHub, структурой её компонентов и способом использования динамической стилизации.