GitHub, Haziran 2026’da web sitesini tamamen CSS Modules kullanacak şekilde çalıştırmayı tamamladı ve styled-components, styled-system ve sx özellikleri de dahil olmak üzere CSS-in-JS’e olan bağımlılığını sona erdirdi. Şirket, bu dönüşümün sunucu tarafı oluşturma süresini %55, sayfadaki bileşenleri başlatmak için gereken süreyi ise %25 azalttığını belirtiyor.
Bu adım, GitHub’ın bazı sayfalarındaki bileşen sayısının 2023’ten bu yana artmasına yanıt olarak atıldı. Önceki çözüm, stillerin istemci tarafında başlatılmasını gerektiriyor, sunucu tarafı oluşturma sırasında stilleri bir araya getirmenin maliyetini artırıyor ve sayfadaki bileşen sayısı yükseldikçe biçimlendirme güncellemelerini zorlaştırıyordu.
GitHub neden CSS Modules’ı seçti?
CSS Modules, stillerin bileşen kaynağının yanında bulunan CSS dosyalarına yazılmasına ve çakışmaları azaltmak için sınıf adlarının varsayılan olarak yerel olmasına olanak tanır. Bu durumda daha da önemlisi, istemci veya sunucu tarafında çalışma zamanı davranışına duyulan ihtiyacı ortadan kaldırmasıdır; stiller, sayfanın HTML’iyle birlikte gönderilen CSS dosyalarında derlenir.
Geçiş süreci Primer tasarım sisteminden başladı. Ekip her bileşen için CSS Modules dosyaları ekledi, bileşenleri eski ve yeni yöntemler arasında geçiş yapılmasını sağlayan özellik bayraklarına bağladı ve ardından sonuçların eşleştiğini doğrulamak için görsel regresyon testlerini kullandı. Daha sonra kapsam, aşamalı olarak Primer ekibinden GitHub çalışanlarına, ardından tüm kullanıcılara genişletildi.
Aralık 2024’e gelindiğinde tüm Primer bileşenleri CSS Modules’a geçirilmişti. Ancak bu yeterli değildi; çünkü GitHub kod tabanının büyük bölümleri bileşenleri satır içi nesneler aracılığıyla özelleştirmek için hâlâ sx özelliğini kullanıyordu. Bu yöntem TypeScript ve tasarım belirteçleriyle iyi bir entegrasyon sağlasa da dinamik yapısı çalışma zamanı maliyetini artırıyor ve bileşen sayısı arttıkça ölçeklendirmeyi zorlaştırıyordu.
Geçişi geniş ölçekte yönetmek
Mevcut kullanımları bozmaktan kaçınmak için GitHub, @primer/styled-react adlı bir ara kütüphane oluşturdu. Bu kütüphane, CSS Modules’a geçirilen bileşenlerle birlikte sx kullanımının sürmesini sağladı; sx’e ihtiyaç duymayan yollar ise doğrudan @primer/react üzerinden içe aktarılabildi.
sx’i kaldırma süreci, bu özelliğin yaklaşık 7.760 kullanımının bulunduğu Nisan 2025’te başladı. Şirket içi bir VS Code eklentisi ve bir codemod aracı yardımıyla sekiz mühendisten oluşan bir grup, altı ay içinde 6.419 kullanımı taşıdı; bazı sayfalarda sunucu tarafı oluşturma süresinde %1 ile %22 arasında kazanımlar elde edildi. Nisan 2026’da sayı, iki mühendisin katılımıyla ve GitHub Copilot’taki programlama ajanları kullanılarak üç hafta içinde 895’ten sıfıra indirildi.
GitHub yedi temayı desteklediği ve her temanın yüksek kontrast moduna sahip olduğu için görsel temalar ek bir zorluk olmaya devam etti; bu sistemin bazı bölümleri styled-components’a bağlıydı. Bu nedenle ekip, renk değişkenlerini CSS’te tanımlı tutarken JavaScript kullanımlarını ve tema araçlarını da taşıdı.
Deneyim geliştiriciler için ne ifade ediyor?
GitHub’ın rakamları, çalışma zamanındaki biçimlendirme mantığından kurtulmanın kullanıcı arayüzleri büyüdüğünde somut kazanımlar sağlayabileceğini gösteriyor. Ancak deneyimin en önemli değeri CSS Modules’ı seçmekten ziyade uygulama yönteminde yatıyor: aşamalı uyumluluk, özellik bayrakları, görsel testler, kademeli dağıtım ve gözden geçirilebilir otomasyon.
Buna karşılık süreç, CSS-in-JS’ten geçişin yalnızca stillerin yazım biçimini değiştirmekle sınırlı olmadığını ortaya koyuyor. sx özelliklerinin kaldırılması, temalar ile styled-components arasındaki bağlantının çözülmesi ve uzun bir dönem boyunca bileşen uyumluluğunun korunması gerekti. Bu nedenle sonuçlar her projenin aynı kazanımları elde edeceğini kanıtlamıyor; kazanımlar GitHub’ın ölçeğiyle, bileşenlerinin yapısıyla ve dinamik biçimlendirmeyi kullanma biçimiyle bağlantılı.