Bir arayüz büyüdükçe aynı mavi rengin farklı tonları, birbirine çok yakın boşluk değerleri ve farklı köşe yuvarlaklıkları ortaya çıkabilir. Tek tek bakıldığında küçük görünen bu farklar, ürünün bütününde tutarsızlık yaratır. CSS değişkenleri, tekrar eden kararları isimlendirerek yönetmek için pratik bir başlangıç sunar.
Bu rehberde küçük bir içerik paneli için renk, boşluk ve yüzey değerleri tanımlayacağız. Ardından aynı bileşenleri karanlık temaya uyarlayacağız. Örnekler başlangıç düzeyindedir; tam bir tasarım sistemi veya test edilmiş tema paketi olarak değerlendirilmemelidir.
Değeri değil, kararın anlamını isimlendirin
MDN CSS özel özellikler rehberi, çift tireyle tanımlanan değerlerin var() üzerinden kullanılmasını açıklar. Bu özellikler CSS’in kapsam ve basamaklanma kurallarına katılır. Böylece bir değeri ortak bir yerde tanımlayıp farklı bileşenlerde kullanabiliriz.
Örnek panelimizde yalnızca --mavi adını kullanmak, rengin ne amaçla seçildiğini açıklamaz. --renk-vurgu veya --renk-metin gibi isimler kullanım rolünü tarif eder. Marka rengi değiştiğinde bileşen kodunun anlamını yeniden yazmak zorunda kalmayız.
Bununla birlikte her sayıyı değişkene çevirmek de yararlı değildir. Tek bir özel illüstrasyona ait ölçü, bütün üründe ortak karar olmayabilir. Örnek projemizde önce gerçekten tekrar eden değerleri belirleyip küçük bir sözlük oluşturmayı tercih edebiliriz.
Temel değerleri tanımlayın
:root {
--renk-zemin: #f4f6fb;
--renk-yuzey: #ffffff;
--renk-metin: #172033;
--renk-ikincil: #475569;
--renk-vurgu: #1d4ed8;
--renk-cizgi: #cbd5e1;
--bosluk-1: 0.25rem;
--bosluk-2: 0.5rem;
--bosluk-3: 1rem;
--bosluk-4: 1.5rem;
--kose-kart: 0.75rem;
}
body {
background: var(--renk-zemin);
color: var(--renk-metin);
}
.panel-karti {
background: var(--renk-yuzey);
border: 1px solid var(--renk-cizgi);
border-radius: var(--kose-kart);
padding: var(--bosluk-4);
}
.panel-karti p {
color: var(--renk-ikincil);
}
.panel-karti a {
color: var(--renk-vurgu);
text-decoration: underline;
}Bu örnekte renkler rol adıyla, boşluklar ise küçük bir ölçekle tanımlandı. Bütün mesafelerin aynı olması hedeflenmiyor; ilişkili öğeler için aynı kararların tekrar kullanılabilmesi hedefleniyor. Kartın iç boşluğu ile başlık altındaki boşluk farklı olabilir, fakat bu fark bilinçli olmalıdır.
Örnek panelde yeni bir bildirim kutusu eklerken ilk soru “hangi rastgele gri iyi görünür?” yerine “bu kutu hangi yüzey rolünü kullanmalı?” olur. Ortak sözlüğün yararı, tasarım tartışmasını tekil renk kodlarından bileşenin işlevine taşımaktır.
Karanlık temayı aynı rollerle kurun
prefers-color-scheme, kullanıcının bildirdiği açık veya koyu görünüm tercihini sorgulamayı sağlar. Aşağıdaki örnek, sistem tercihi koyu olduğunda aynı değişkenlerin değerlerini değiştirir:
@media (prefers-color-scheme: dark) {
:root {
--renk-zemin: #0f172a;
--renk-yuzey: #172033;
--renk-metin: #f1f5f9;
--renk-ikincil: #cbd5e1;
--renk-vurgu: #93c5fd;
--renk-cizgi: #475569;
}
}Kartın CSS’ini yeniden yazmadık; rollerin karşılıklarını değiştirdik. Örnek yalnızca sistem tercihini izler. Kullanıcıya sitede ayrıca tema seçimi sunmak istiyorsanız seçimin nasıl saklanacağı, sistem tercihini ne zaman geçersiz kılacağı ve sayfa açılışında nasıl uygulanacağı ayrıca tasarlanmalıdır.
İki tema hazırlamak, her rengi otomatik olarak ters çevirmek anlamına gelmez. Logo, uyarı renkleri, seçili durumlar ve çizimler kendi bağlamlarında incelenmelidir. Buradaki renk paleti örnek amaçlıdır; metin, bağlantı ve odak göstergelerini gerçek tasarımınızda kontrast açısından kontrol edin.
Kapsamı bilinçli kullanın
Çift tireyle tanımlanan özel özellikler varsayılan olarak miras alınır. Aynı değişkeni daha dar bir kapsayıcıda yeniden tanımlamak, o bölümdeki bileşenleri etkileyebilir. Örneğin tanıtım bandının farklı yüzey rengi olması gerekiyorsa bunu bütün sitenin değerini değiştirmeden ele alabilirsiniz.
Örnek panelimizin ücretli plan tanıtım alanında kart rengini değiştirmek istediğimizi düşünelim. Yeni bir değişken eklemeden önce bunun gerçekten yeni bir rol mü, yoksa mevcut rolün belirli bir bölümdeki farklı değeri mi olduğunu değerlendirelim. Bu karar, sözlüğün gereksiz büyümesini önler.
Öte yandan çok fazla iç içe yeniden tanımlama yapmak, bir rengin nereden geldiğini anlamayı zorlaştırır. Küçük projemiz için önce kök tema, ardından sınırlı bileşen istisnaları kullanmak daha izlenebilir bir düzen sağlayabilir.
@property ne zaman anlamlıdır?
@property, özel özellikler için tür, başlangıç değeri ve miras davranışı gibi bilgiler tanımlamaya imkân verir. Bu, sıradan çift tireli tanımdan daha ayrıntılı bir mekanizmadır. Özellikle türü belirli değerlerle veya animasyon davranışlarıyla çalışırken değerlendirilebilir.
Ancak örnek panelimizde renk ve boşlukları paylaşmak için buna hemen ihtiyaç yoktur. Önce adlandırma ve kapsamı oturtmak daha yararlı olabilir. Kullanmayı seçtiğinizde hedef tarayıcı desteğini ve eklediğiniz kayıtların mevcut değerlerle nasıl etkileştiğini kontrol edin.
Tasarım sözlüğünü nasıl büyütmeli?
İlk sürümden sonra bütün sayfalardaki tekrarları gözden geçirin. Üç ayrı buton aynı işi yapmasına rağmen farklı görünüyorsa ortak bir bileşen kararı verin. Her farkı yeni bir değişkenle meşrulaştırmak, tutarsızlığı yalnızca isimlendirmiş olur.
Küçük bir örnek sayfada kartı, bağlantıyı, hata mesajını, form alanını ve odak durumunu birlikte gösterin. Açık ve koyu temada bu sayfayı incelemek, tek bir ekran üzerinden karar vermekten daha kapsamlıdır. Uzun metinler ve boş içerikler de aynı görsel dili korumalıdır.
Başlangıç hedefiniz yüzlerce tasarım değişkeni üretmek olmasın. Ekibin anlayabildiği küçük bir sözlük, hangi değerin neden değiştiğini izlemeyi kolaylaştırır. Tutarlı isimler ve sınırlı istisnalarla başlayan bir yapı, ürün büyüdükçe daha sağlam biçimde genişletilebilir.
