GitHub arayüzünü CSS Modules'e taşıdı ve styled-components'ten vazgeçti

GitHub mühendisleri, şirketin arayüzünde CSS-in-JS yerine CSS Modules kullanımına nasıl geçtiğini anlattı. Yazıyı Primer tasarım sistemi mühendisleri Josh Black ve Marie Lucca kaleme aldı; metin 25 Eylül 2026'da GitHub Blog'da yayımlandı.

Stil altyapısı neden darboğaza dönüştü

Sorunlar 2023'te bazı sayfalardaki bileşen sayısının hızla artmasıyla başladı. Stiller istemci tarafında başlatıldığı için sayfaların ilk yüklenmesi uzadı, sunucu tarafı render performansı düştü ve bileşen sayısı arttıkça stil güncellemeleri kontrol edilemez hale geldi. Primer ekibi hem istemci hem sunucu maliyetinden kaçınan, GitHub'ı bozmayan bir çözüm arıyordu.

CSS Modules ve kademeli geçiş

Ekip CSS Modules'te karar kıldı. Bu formatta stiller bileşenin JavaScript koduyla aynı dizindeki bir CSS dosyasında yazılıyor, sınıf adları yerel kalıyor ve çalışma zamanı gerekmiyor: stiller sayfanın HTML'iyle gönderilen stil sayfalarında toplanıyor. Her bileşen, eski ve yeni stiller arasında geçiş yapan bir özellik bayrağının arkasında taşındı; görsel regresyon testleri görüntülerin aynı olduğunu doğruladı ve dağıtım kademeli olarak tüm kullanıcılara açıldı. Geçiş Aralık 2024'te tamamlandı: sayfanın sunucu tarafı render süresi %55, sayfadaki bileşenlerin başlatılma süresi %25 azaldı.

sx prop'un kaldırılması

Asıl zor kısım, Primer bileşenlerini özelleştirmenin yerleşik yolu olan sx prop'uydu. Güçlü TypeScript desteği sunuyordu, ama çalışma zamanı maliyeti yüksekti ve ölçeklenmiyordu. GitHub önce bir uyumluluk paketi olan @primer/styled-react'i oluşturdu; böylece mevcut kod bileşenleri içe aktarmaya devam ederken uygulamalar @primer/react'e taşındı. Çalışma Nisan 2025'te başladı ve taşınacak yaklaşık 7.760 sx prop vardı. Sekiz mühendisten oluşan bir rotasyon altı ayda 6.419 prop'u taşıdı; bazı sayfalarda sunucu tarafı render kazancı %1 ile %22 arasında ölçüldü. Nisan 2026'da iki mühendis, Copilot kodlama ajanlarıyla kalan 895 prop'u üç haftada sıfıra indirdi.

Yedi tema ve son temizlik

GitHub yedi temayı destekliyor ve her birinin yüksek kontrast sürümü var; hepsi styled-components üzerinden çalışıyordu. Tema değişkenleri zaten CSS'te tanımlıydı; geriye JavaScript yardımcılarını kaldırmak kaldı ve iki ay sonra bağımlılıklar gitti. GitHub Haziran 2026'dan bu yana %100 CSS Modules üzerinde çalışıyor ve sx, styled-components ile styled-system ana uygulamadan kaldırıldı.