CSS'te Merkezi Stil Yönetimi: Tek Dosya Değil, Tek Kaynak

Merkezi stil yönetimi denince akla genelde tek bir CSS dosyası gelir. Asıl ölçüt dosya sayısı değil, bir rengin ya da boşluk değerinin projede kaç yerde tanımlandığı. Aynı maviyi yedi ayrı yere elle yazdıysanız, o yedi dosyayı tek dosyada birleştirmek hiçbir şeyi düzeltmez.

Tek dosya değil, tek kaynak

Bir stil sisteminin sağlığını satır sayısıyla ölçemezsiniz. Ölçüt şu: bir değeri değiştirmek için kaç yere dokunuyorsunuz? Cevap birden büyükse merkezi bir dosyanız var ama merkezi bir stiliniz yok. Kurumsal renk değişikliği talebi geldiğinde bu fark bir günle bir hafta arasındaki farktır.

Harici dosyanın önbelleğe alınıp sonraki sayfalarda yeniden indirilmemesi doğru bir avantaj. Buradan "her şeyi tek dosyaya koy" sonucu çıkmaz. Tek bir devasa dosya ilk ziyarette render'ı bloklar ve kullanıcı, hiç girmeyeceği yönetim ekranlarının stilini de indirir. Ortak temel tek dosyada dursun, yalnızca belirli şablonlarda çalışan ağır bölümler ayrı yüklensin.

Değişkenler işin asıl aracı

Özel özellikler (custom properties) tek kaynağı kod düzeyinde zorunlu kılar. Değer bir kez tanımlanır, geri kalan her yer ona referans verir:

:root { --renk-vurgu: #0b5fff; --olcek: 8px; } .buton { background: var(--renk-vurgu); padding: var(--olcek) calc(var(--olcek) * 2); }

Paleti genelde :root altında bir düzine değişkenle tutarım, bileşenler ham hex görmez. Bunun somut karşılığı koyu tema: [data-theme="koyu"] seçicisi altında aynı değişkenleri yeniden tanımlarsınız, bileşenlerin tek satırı değişmez. Değişkenler çalışma zamanında çözüldüğü için JavaScript tarafında setProperty ile tek bir değeri güncellemek de mümkün; bunu Sass değişkenleriyle yapamazsınız, çünkü onlar derleme anında sabitlenir.

!important hakkında yaygın bir yanlış

"!important kullanmayın, kullanıcının kendi ayarlarını eziyorsunuz" cümlesi tasarım kılavuzlarında sık geçer ve teknik olarak yanlıştır. Cascade sırası, düşükten yükseğe doğru şöyle işler:

1. Tarayıcının varsayılan stilleri
2. Kullanıcı stilleri
3. Yazarın (sitenin) stilleri
4. Yazarın !important bildirimleri
5. Kullanıcının !important bildirimleri
6. Tarayıcının !important bildirimleri

Yani kullanıcı !important yazdığı anda sizin !important'ınız geçersiz kalır. Erişilebilirlik gerekçesi burada tutmuyor. !important'tan kaçınmanın gerçek sebebi daha sıradan: kendi kodunuzda özgüllük savaşı başlatır ve altı ay sonra bir stilin neden uygulanmadığını bulmak yarım saatinizi alır. Sıralama sorununuz varsa @layer ile katman tanımlayın, özgüllüğü şişirmeden sırayı siz belirlersiniz.

Yüzde değil rem

Kaynak kılavuzların çoğu font boyutu için yüzde önerir. Bu tavsiye 2010'ların başında kaldı, bugün doğru birim rem. Yüzde miras yoluyla çarpılır: %90 tanımlı bir kapsayıcının içine %90 tanımlı bir kutu koyduğunuzda gerçek oran 0,81 olur, bir seviye daha inerseniz 0,73. Tasarımda kimsenin istemediği bu sürüklenmeyi yakalamak, ekranda küçük görünen metni fark edene kadar sürer.

rem her zaman kök font boyutuna bağlıdır, iç içe geçmeden etkilenmez ve kullanıcı tarayıcı ayarından varsayılanı 16px'ten 20px'e çıkardığında tüm ölçek birlikte büyür. Gövde metnini px ile yazarsanız o ayarı sessizce yok saymış olursunuz. Kenarlık kalınlığı gibi ölçeklenmemesi gereken yerlerde px yerinde durur.

Stil kapalıyken sayfa

CSS'in yüklenmediği durum teorik bir senaryo değil: ağ hatası, içerik engelleyici, okuma modu, ekran okuyucunun görsel katmanı hiç işlememesi. Test basit, geliştirici araçlarından stil dosyasını devre dışı bırakın ve sayfayı yukarıdan aşağı okuyun. Belge sırası anlamlıysa sorun yok; menü metinleri içeriğin ortasına düşüyorsa yerleşimi CSS'e fazla yaslamışsınızdır.

Bir adım ötesi renkle taşınan bilgi. Hata alanını yalnızca kırmızı kenarlıkla işaretlemek WCAG 1.4.1'in doğrudan ihlalidir; aynı bilgiyi metin olarak da vermek gerekir. Bu, stil dosyasına değil bileşenin HTML'ine ait bir karardır, dolayısıyla merkezi CSS'i düzelterek geçiştiremezsiniz.

İstisna ne zaman meşru

Tek bir kampanya sayfasının kendine özgü bir düzeni varsa o stili sayfaya gömün, merkezi dosyayı tek kullanımlık kurallarla şişirmeyin. Kural basit: aynı ihtiyaç ikinci kez ortaya çıktığında stil merkezi dosyaya taşınır. Birinci kez istisnadır, ikinci kez desendir. Bu eşiği koymazsanız merkezi dosya birkaç ay içinde hangi sayfada ne işe yaradığı bilinmeyen kuralların deposuna döner.