Primer Design System предоставляет базовые компоненты для таких элементов интерфейса на GitHub, как кнопки, баннеры и хлебные крошки. Эти компоненты должны быть доступными, гибкими и высокопроизводительными в различных сценариях.
В 2023 году количество компонентов на некоторых страницах резко возросло, и в существующем решении CSS-in-JS возникли следующие проблемы:
- Поскольку стили инициализировались на клиенте, первоначальная загрузка страниц занимала больше времени.
- Перенос сбора стилей с клиента снизил производительность рендеринга на стороне сервера.
- По мере увеличения количества компонентов на странице обновления стилей вышли из-под контроля.
Команда Primer искала решение, которое устранило бы затраты на стороне клиента и сервера и не привело бы к поломкам на GitHub во время перехода. CSS Modules позволяли использовать локальные возможности CSS и сохранять определённый уровень инкапсуляции, ожидаемый от CSS-in-JS. Стили должны были писаться в CSS-файлах рядом с исходным кодом JavaScript; имена классов по умолчанию были бы локальными, а среда выполнения на стороне клиента или сервера не требовалась бы. Вместо этого стили объединялись бы в CSS-файлы, отправляемые вместе с HTML.
Для перехода каждый компонент проходил следующие этапы:
- Добавлялся новый файл, преобразующий существующие стили в CSS Modules.
- Использовался флаг функции, позволявший выбирать между старыми и новыми стилями.
- С помощью тестов на визуальные регрессии проверялось, что снимки экрана идентичны.
- Флаг постепенно включался сначала для команды, затем для сотрудников GitHub и после этого для всех пользователей.
Этот процесс обеспечил раннюю обратную связь. В декабре 2024 года все компоненты Primer были переведены на CSS Modules.
Почему это важно
Это изменение показывает, что в интерфейсах с растущим числом компонентов управление стилями влияет не только на удобство разработки, но и на загрузку страниц и стоимость обработки на стороне сервера. Объединение стилей не во время выполнения, а в файлах, отправляемых вместе с HTML, направлено на сокращение операций, создающих дополнительную нагрузку на стороне клиента и сервера. Разбиение перехода на этапы с помощью флагов функций и тестов на визуальные регрессии важно с точки зрения возможности тестировать технические изменения в широко используемых дизайн-системах, не допуская затрагивающих пользователей сбоев. Получение ранней обратной связи также позволило отслеживать проблему не только на уровне кода, но и на экранах, с которыми взаимодействуют команды и пользователи. Вместе с тем в материале не приводится оценка того, к каким результатам этот подход может привести в дизайн-системах помимо Primer.