1. Spagetti CSS ve Tema Karmaşasının Önüne Geçmek
Büyük e-ticaret platformlarında zamanla yüzlerce farklı buton stili, 15 farklı gri tonu ve uyumsuz kenar yuvarlama (border-radius) değerleri türemeye başlar. Geliştiriciler yeni bir sayfa yaparken eski CSS sınıflarını ezmek (override) için !important kullanır; CSS dosyası 500 KB'a şişer.
Stilgen Tasarım Sistemi, Atomic Design Tokens prensibiyle kurulmuştur. Renkler, boşluklar, gölgeler ve tipografi rastgele seçilmez; merkezi bir tema motoru tarafından yönetilir.
2. FOUC-Free Dark / Light Tema Geçiş Mimarisi
En rahatsız edici kullanıcı deneyimlerinden biri, karanlık mod kullanan bir kullanıcının siteyi açtığında sayfa tam yüklenene kadar 200 milisaniye boyunca bembeyaz bir parlama görmesidir (Flash of Unstyled Content - FOUC).
Stilmerce, HTML'in <head> alanına yerleştirilen engellemesiz (blocking-free) mikro script ile işletim sistemi tercihini (prefers-color-scheme) milisaniyede algılar:
// globals.css Token Mimarisi
:root {
--bg: #ffffff;
--surface: #f5f5f7;
--ink: #1d1d1f;
--muted: #86868b;
--line: rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] {
--bg: #09090b;
--surface: #141416;
--ink: #f5f5f7;
--muted: #a1a1a6;
--line: rgba(255, 255, 255, 0.12);
}Bileşenler doğrudan hardcoded renkler kullanmaz; semantik değişkenleri referans alır: background: var(--surface), color: var(--ink).
3. Apple Tarzı Akışkan Tipografi ve 12 KB CSS Çıktısı
Tailwind CSS JIT (Just-In-Time) derleyicisi sayesinde tüm projede yalnızca gerçekten kullanılan sınıflar CSS çıktısına dahil edilir:
- Geleneksel e-ticaret şablonlarında 300 - 600 KB olan CSS boyutu, Stilmerce'te yalnızca 11.8 KB'tır.
clamp()fonksiyonu ile ekrana göre pürüzsüz büyüyen akışkan tipografi (Fluid Typography) sayesinde mobilden 4K ekranlara kadar mükemmel okunabilirlik sağlanır.
Maksimum Hız
11.8 KB'lık CSS, tek bir TCP paketine (14.6 KB initial congestion window) sığar. Bu sayede tarayıcı ek bir ağ turu (Round-Trip Time) yapmadan tüm stilleri ilk pakette indirir.