İki farklı stil yazma yolu
React gibi kütüphanelerle çalışırken stilleri iki temel şekilde yazabilirsin.
1. Çalışma anında CSS-in-JS. styled-components gibi kütüphanelerde stiller JavaScript içinde yazılır. Bir bileşenin rengi bir değişkene bağlı olabilir. Son CSS, sayfa oluşturulurken hesaplanır. Artısı: Sadece o sayfada gerçekten kullanılan stiller gönderilir. Eksisi: Bu hesabı birinin yapması gerekiyor. Sunucuda render ediyorsan o kişi sunucu, sonra da tarayıcı.
2. Derleme anında CSS. Stiller normal CSS dosyalarında durur ve proje derlenirken hazır dosyalara dönüşür. CSS Modules bunun yaygın bir örneği: Her bileşenin yanında bir CSS dosyası olur ve sınıf adları otomatik olarak o bileşene özel hâle gelir. Çalışma anında hiçbir hesap yok. Ama o sayfada kullanılmayan stiller de gidebilir.
GitHub’ın sorunu
GitHub’ın arayüzü Primer adlı kendi tasarım sistemiyle kuruluyor. GitHub’ın 25 Eylül tarihli yazısına göre 2023’te bazı sayfalardaki bileşen sayısı patladı ve styled-components üç soruna yol açtı:
- Stiller tarayıcıda hazırlandığı için ilk açılış uzadı.
- Stil toplama işi sunucuya kayınca sunucu tarafı render yavaşladı.
- Bileşen sayısı arttıkça stil güncellemeleri kontrolden çıktı.
Özellikle sx adlı bir özellik sorunluydu. Ekipler her bileşene satır içi bir nesneyle istedikleri stili verebiliyordu. Çok rahattı ama her seferinde çalışma anında işlenmesi gerekiyordu.
Adım adım geçiş
GitHub hepsini bir gecede değiştirmedi:
- Her bileşen için CSS Modules karşılığı yazıldı.
- Eski ve yeni stil arasında bir feature flag (özellik anahtarı) ile geçiş yapıldı.
- Görsel regresyon testleriyle iki sürümün ekran görüntüleri karşılaştırıldı.
- Önce ekibe, sonra GitHub çalışanlarına, en son herkese açıldı.
Aralık 2024’te Primer’ın bütün bileşenleri taşınmıştı. GitHub’a göre bir sayfayı sunucuda render etme süresi %55, bileşenlerin başlatılma süresi %25 azaldı.
Sonra sıra GitHub’ın kendi kodundaki binlerce sx kullanımına geldi. Sekiz mühendis altı ayda 6.419 tanesini taşıdı. Bazı sayfalarda sunucu render süresi %1 ile %22 arasında kısaldı. Videonun başlığındaki %22 buradan geliyor. Son kalan 895 tanesini ise Nisan 2026’da iki mühendis Copilot ajanlarının yardımıyla üç haftada bitirdi. GitHub, Haziran 2026’dan beri tamamen CSS Modules ile çalışıyor.
Bir kural değil, bir denge
Videonun da altını çizdiği nokta önemli: Sunucu render süresinin kısalması, sayfanın toplamda o kadar hızlı açıldığı anlamına gelmiyor. Sadece sunucunun payı küçüldü.
Karşılığında tarayıcıya giden CSS arttı. Bu çoğu zaman sorun değil. Hazır bir CSS dosyası tarayıcıda önbelleğe alınabilir ve sonraki sayfalarda yeniden indirilmez. Ama küçük, az bileşenli bir sitede çalışma anında CSS-in-JS’in maliyeti zaten fark edilmeyebilir. Hangisinin daha iyi olduğunu kendi uygulamanda ölçerek görürsün.
Bu eğilim tek başına değil. Daha önce yazdığımız StyleX da stilleri derleme anında hazırlıyor, tarayıcıda stil hesaplayan ekstra kod çalıştırmıyor. GitHub’ın yazısına göre geçiş sürerken styled-components’in kendisi de bakım moduna alındı.
Düşün
- Senin projende stiller nerede hesaplanıyor: derlemede mi, sunucuda mı, tarayıcıda mı?
- “Daha az veri gönder” ile “daha az iş yap” çatıştığında hangisini seçerdin?
Kaynaklar (4, İngilizce)
Kendi cümlelerimizle yazılmış bir özettir, çeviri değildir. Tüm kaynaklar yukarıda.