GitHub interfeysini CSS Modules-ə keçirdi və styled-components-dən imtina etdi

GitHub mühəndisləri şirkətin interfeysdə CSS-in-JS-i CSS Modules ilə necə əvəz etdiyini danışıb. Yazı 25 sentyabr 2026-cı ildə GitHub Blog-da dərc olunub; müəllifləri Primer dizayn sistemi mühəndisləri Josh Black və Marie Luccadır.

Stil sistemi niyə maneəyə çevrildi

Problemlər 2023-cü ildə bəzi səhifələrdə komponentlərin sayının kəskin artması ilə başladı. Stillər müştəri tərəfində işə salındığı üçün səhifələrin ilk yüklənməsi uzanıb, server tərəfində render performansı düşüb, komponent sayı artdıqca stil yeniləmələri idarəolunmaz hala gəlib. Primer komandası həm müştəri, həm server xərclərindən qaçan və GitHub-ı pozmayan həll axtarırdı.

CSS Modules və tədricən keçid

Komanda CSS Modules üzərində dayandı. Bu formatda stillər komponentin JavaScript kodu ilə bir qovluqdakı CSS faylında yazılır, klas adları lokaldır və ayrıca runtime tələb etmir: stillər səhifənin HTML-i ilə göndərilən stil cədvəllərində toplanır. Hər komponent köhnə və yeni stilləri dəyişən xüsusiyyət bayrağının arxasında köçürüldü; vizual reqressiya testləri görüntülərin eyni olduğunu təsdiqlədi, yayım isə tədricən bütün istifadəçilərə açıldı. Keçid 2024-cü ilin dekabrına qədər tamamlandı: səhifənin server tərəfində render müddəti 55%, səhifədəki komponentlərin işə düşmə vaxtı isə 25% azaldı.

sx prop-un dayandırılması

Ən çətin hissə Primer komponentlərini fərdiləşdirməyin adi yolu olan sx prop idi. O, güclü TypeScript dəstəyi verirdi, lakin işləmə vaxtında baha başa gəlirdi və zəif miqyaslanırdı. GitHub əvvəlcə @primer/styled-react adlı uyğunluq paketi yaratdı ki, mövcud kod komponentləri import etməyə davam etsin, implementasiyalar isə @primer/react-ə köçsün. İş 2025-ci ilin aprelində başladı: köçürüləsi təxminən 7760 sx prop var idi. Səkkiz mühəndisdən ibarət rotasiya altı ayda 6419 prop-u köçürdü və bəzi səhifələrdə server tərəfində render qazancı 1%-dən 22%-ə qədər ölçüldü. 2026-cı ilin aprelində iki mühəndis Copilot agentləri ilə qalan 895 prop-u üç həftəyə sıfıra endirdi.

Yeddi tema və son təmizlik

GitHub yeddi temanı dəstəkləyir və hər birinin yüksək kontrast variantı var; hamısı styled-components vasitəsilə işləyirdi. Tema dəyişənləri artıq CSS-də təyin olunmuşdu, qalan iş JavaScript utilitlərini silmək idi; iki ay sonra asılılıqlar yox oldu. GitHub 2026-cı ilin iyunundan bəri 100% CSS Modules üzərində işləyir və sx, styled-components və styled-system əsas tətbiqdən çıxarılıb.