Новый подход убрал необходимость выполнять код для стилей на клиенте и сервере. С июня 2026 года GitHub использует CSS Modules для всех стилей сайта.

CSS Modules — это способ хранить стили в CSS-файлах рядом с кодом компонента.

Команда переносила компоненты постепенно: добавляла CSS Modules, переключатель между новыми и старыми стилями, сравнивала результаты визуальными регрессионными тестами и постепенно открывала доступ. К декабрю 2024 года она перевела на CSS Modules все компоненты Primer, дизайн-системы GitHub.

После переноса компонентов Primer серверная отрисовка страницы стала занимать на 55% меньше времени, а инициализация компонентов — на 25% меньше.

Проверка утверждений:

  • CSS Modules убрали необходимость выполнять код для стилей на клиенте и сервере. (подтверждено самой публикацией: доказательство; «This format also removes the need for any client or server runtime behavior.»)
  • С июня 2026 года GitHub использует CSS Modules для всех стилей сайта. (подтверждено самой публикацией: доказательство; «GitHub has been running on 100% CSS modules as of June 2026.»)
  • Команда переносила компоненты постепенно, используя CSS Modules, переключатели функций, визуальные регрессионные тесты и постепенное расширение доступа. (подтверждено самой публикацией: доказательство; «Add a new file that translated existing styles to CSS Modules Add the component to a feature flag that would toggle between the new and old styles Use existing visual regression tests to verify snapshots were identical between our CSS-in-JS solution and CSS Modules Gradually roll out the feature flag to our team, then to GitHub staff, and finally to all GitHub users to catch any issues along the way»)
  • К декабрю 2024 года все компоненты Primer перенесли на CSS Modules. (подтверждено самой публикацией: доказательство; «By December 2024, all components in Primer were migrated over to CSS Modules using this process.»)
  • После переноса компонентов Primer серверная отрисовка страницы стала занимать на 55% меньше времени, а инициализация компонентов — на 25% меньше. (подтверждено самой публикацией: доказательство; «55% less time to server-side render a page 25% less time for components on a page to initialize»)

Первоисточники:

оценка 62,8 из 100 · тип: руководство