CSS değişkenleri (resmî adıyla custom properties), bir değeri tek yerde tanımlayıp tüm stil sayfası boyunca tekrar kullanmanı sağlayan, tarayıcıların yerel olarak desteklediği bir özelliktir. Sass gibi bir ön-işlemciye ihtiyaç duymadan renk, boşluk, yazı tipi gibi değerleri merkezîleştirir; en güzeli de çalışma zamanında (runtime) JavaScript ile değiştirilebilmeleridir. Bu yazıda CSS değişkenlerini sıfırdan kuracak, gerçek bir tema (açık/koyu) örneği yazacak ve günlük projelerde işine yarayacak desenleri göreceğiz.
CSS değişkenleri tam olarak nedir?
Bir custom property -- ile başlayan bir isim ve bir değerden oluşur. Onu okumak için var() fonksiyonunu kullanırsın. En yaygın yaklaşım, değişkenleri :root seçicisinde tanımlamaktır; çünkü :root belgenin kök elemanını (<html>) hedefler ve buradaki değişkenler tüm sayfada erişilebilir olur.
:root {
--renk-birincil: #6c5ce7;
--renk-metin: #1a1a1a;
--bosluk: 16px;
}
.buton {
background: var(--renk-birincil);
color: white;
padding: var(--bosluk);
}Artık birincil rengi değiştirmek istediğinde tek bir satırı güncellersin; bu renge dayanan onlarca kural otomatik olarak güncellenir. Klasik sabit kodlanmış (hard-coded) değerlerin aksine, tek bir doğruluk kaynağın olur.
var() ve yedek (fallback) değerler
var() ikinci bir argüman olarak yedek değer alabilir. Değişken tanımlı değilse veya geçersizse bu yedek devreye girer. Bu, henüz tanımlanmamış bir değişkene güvenli erişim için kullanışlıdır:
.kart {
/* --kart-arkaplan tanımlı değilse beyaz kullanılır */
background: var(--kart-arkaplan, #ffffff);
border-radius: var(--kart-radius, 8px);
}Yedek değer, virgülden sonraki her şeyi kapsar; dolayısıyla başka bir var() bile yedek olabilir: var(--a, var(--b, red)).
Kalıtım (inheritance) ve kapsam (scope)
CSS değişkenlerinin en güçlü yanı, normal CSS kalıtımına uymalarıdır. Bir değişkeni belirli bir elemanda tanımlarsan, sadece o eleman ve alt çocukları o değeri görür. Bu, bileşene özgü (component-scoped) temalar kurmayı kolaylaştırır:
.uyari {
--renk-vurgu: #e17055;
}
.uyari .baslik {
color: var(--renk-vurgu); /* turuncu */
}Aynı --renk-vurgu değişkenini farklı kapsayıcılarda farklı değerlerle tanımlayıp, içerdeki ortak bileşenlerin görünümünü tek satırla değiştirebilirsin. Bu, Sass değişkenleriyle yapamayacağın bir şeydir; çünkü Sass değişkenleri derleme zamanında çözülür ve kapsam/kalıtım kavramı yoktur.
Pratik örnek: açık/koyu tema
CSS değişkenlerinin en sık kullanıldığı yer tema değiştirmektir. Renkleri değişkenlere taşır, sonra <html> üzerindeki bir data-theme niteliğine göre değerleri ezersin:
:root {
--bg: #ffffff;
--metin: #1a1a1a;
--kart: #f5f5f7;
}
[data-theme="dark"] {
--bg: #0f0f12;
--metin: #f2f2f5;
--kart: #1c1c22;
}
body { background: var(--bg); color: var(--metin); }
.kart { background: var(--kart); }Geçişi JavaScript ile tetiklemek tek satırlık iştir:
const btn = document.querySelector('#tema-degistir');
btn.addEventListener('click', () => {
const html = document.documentElement;
const yeni = html.dataset.theme === 'dark' ? 'light' : 'dark';
html.dataset.theme = yeni;
localStorage.setItem('tema', yeni);
});Burada dikkat: tema geçişinde tüm sayfanın aynı anda değişmesini istiyorsan, geçiş animasyonlarını (transition) o an için geçici olarak kapatman performans açısından iyi olur; aksi halde tarayıcı yüzlerce elemanı aynı anda yumuşatmaya çalışır.
JavaScript ile değişkenleri okuma ve yazma
Custom property'ler DOM üzerinden okunabilir ve yazılabilir. Bu, kaydırma konumuna, fare hareketine veya kullanıcı girdisine göre dinamik stiller üretmek için çok güçlüdür:
const root = document.documentElement;
// Yazma
root.style.setProperty('--renk-birincil', '#00b894');
// Okuma
const deger = getComputedStyle(root)
.getPropertyValue('--renk-birincil')
.trim();Örneğin fare konumunu bir değişkene yazıp, sadece CSS ile bir parlama (glow) efekti oluşturabilirsin. Mantık JavaScript'te, görsel ise tamamen CSS'te kalır; bu da kodu temiz tutar.
İyi pratikler ve dikkat edilecekler
- Anlamlı isimler kullan.
--renk-birincilgibi role dayalı isimler,--morgibi değere dayalı isimlerden daha sürdürülebilirdir; çünkü değer değişse de isim mantıklı kalır. - Tasarım token'larını grupla. Renk, boşluk, yarıçap ve gölge gibi grupları
:rootiçinde mantıklı bloklar hâlinde topla. - Büyük/küçük harfe duyarlıdır.
--Renkile--renkfarklı değişkenlerdir. - Sadece değer tutar, seçici değil. Bir değişkene tam bir CSS kuralı değil, yalnızca bir değer (renk, sayı, uzunluk) atayabilirsin.
- Tarayıcı desteği geniştir. Tüm modern tarayıcılar yıllardır destekler; sadece çok eski Internet Explorer sürümleri desteklemez.
Sık Sorulan Sorular
CSS değişkenleri ile Sass değişkenleri arasındaki fark nedir?
Sass değişkenleri ($renk) derleme zamanında çözülür ve nihai CSS'te yer almaz; statiktir. CSS değişkenleri (--renk) ise tarayıcıda canlı kalır, kalıtıma uyar ve JavaScript ile çalışma zamanında değiştirilebilir. Tema gibi dinamik senaryolar için CSS değişkenleri çok daha uygundur.
Custom property'lerde media query kullanabilir miyim?
Evet. Değişkeni bir @media bloğu içinde yeniden tanımlayarak yanıt veren (responsive) değerler üretebilirsin; örneğin geniş ekranda --bosluk: 32px, mobilde --bosluk: 16px. Bu kuralı kullanan tüm bileşenler otomatik uyum sağlar.
Bir değişken geçersiz bir değer alırsa ne olur?
İlgili özellik geçersiz hesaplama (invalid at computed-value time) olarak işaretlenir ve mülkün kalıtılmış ya da başlangıç değeri kullanılır. Bu yüzden kritik yerlerde var() yedek değeri eklemek güvenlidir.
Projende temiz, ölçeklenebilir bir tasarım sistemi mi istiyorsun? CSS değişkenleriyle bakımı kolay, tema desteği hazır bir arayüz kurmana yardımcı olabilirim. Benimle iletişime geç ve projeni konuşalım.