Belirteç Adlandırma Kuralları
Belirteç adlarını genel, takma ad ve bileşene özel adlandırma katmanlarını kullanarak hiyerarşik biçimde yapılandırın.
Belirteç Adlandırma Kuralları, CoddyKit'te ücretsiz bir CSS Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. CSS Academy kursu toplamda 4 dersten oluşur.
Adlandırma neden önemlidir
Tutarsız belirteç adları, değerini okumadan bir belirtecin ne yaptığını tahmin etmeyi imkânsız hâle getirir. Açık ve öngörülebilir bir adlandırma kuralı, ölçeklenebilir bir belirteç sisteminin temelidir.
Kategori-Özellik-Varyant deseni
Yaygın bir desen şöyledir: [category]-[property]-[variant]. Örnekler: color-text-primary, color-text-secondary, spacing-inset-sm. Her bölüm, anlamı giderek daha belirgin hâle getirir.
Anlamsal ve palet adları
Bileşenlerde blue-500 gibi palet adlarından kaçının. Anlamsal adlar kullanın: color-action-default, color-feedback-error. Anlamsal adlar, bileşenlerde güncelleme yapmadan marka rengi değişikliklerine uyum sağlar.
Durum değiştiricileri
Durumu sona ekleyin: color-button-bg-default, color-button-bg-hover, color-button-bg-disabled. Tutarlı durum son ekleri, belirteç kümelerini öngörülebilir ve eksiksiz hâle getirir.
Ölçek adlandırması
Tişört bedenlerini (xs, sm, md, lg, xl) veya sayısal ölçekleri (100, 200...900) tutarlı bir şekilde kullanın. Sayısal ölçekler ara değerlerin eklenmesine olanak tanır; tişört bedenleri ise küçük kümelerde insanlar için daha okunabilirdir.
Ad alanı ön ekleri
Çok markalı veya çok ürünlü sistemlerde belirteçlere bir ad alanı ön eki ekleyin: brand-a-color-primary ve brand-b-color-primary. Ad alanları, belirteç kümeleri birleştirilirken oluşabilecek çakışmaları önler.
CSS değişkeni çıktısı
Kebab biçimi doğrudan CSS özel özelliklerine dönüşür: color-text-primary, --color-text-primary hâline gelir. Camel biçimindeki belirteçlerin dönüştürülmesi gerekir; kebab biçimindeki belirteçlerde buna gerek yoktur.
Adlandırmanın bir parçası olarak belgeleme
İyi adlar kendini açıklar: spacing-stack-md (dikey olarak üst üste dizilmiş öğeler arasındaki orta düzey boşluk), yorum olmadan amacı aktarır. s3 gibi kötü adların anlaşılması için harici belgeleme gerekir.
Geriye dönük uyumsuz değişikliklerden kaçınma
Belirteçler kullanılmaya başladıktan sonra adlarını değiştirmek, geriye dönük uyumsuz bir değişikliktir. Kullanımdan kaldırma takma adları kullanın: eski adı koruyun, ancak yeni belirtece başvurmasını sağlayın. Kullanımdan kaldırılan belirteçleri kaldırmadan önce kullananlara geçiş süresi tanıyın.
Araçlarla uygulama
Belirteç adlarını Style Dictionary'deki özel kurallarla veya bir CI betiğiyle denetleyin. Adlandırma desenine uymayan belirteçleri reddedin. Otomatik uygulama, sistem büyüdükçe adlandırmanın farklılaşmasını önler.
Ekip uyumu
Doğru ve yanlış ad örneklerini içeren bir adlandırma kılavuzu yayımlayın. Sistem ölçeklenmeden önce tasarım ve mühendislik ekiplerinin kurallar üzerinde anlaşması için kısa bir atölye düzenleyin. Tutarlılık yalnızca belgeleme değil, ortak anlayış gerektirir.
Bilgi Kontrolü
Bileşen belirteçleri neden "mavi-500" gibi palet adları yerine anlamsal adlar kullanmalıdır?
Özet
Kategori-özellik-varyantı kalıplarını, anlamsal adları, durum soneklerini ve ad alanı öneklerini kullanan tutarlı bir belirteç adlandırma kuralı; belirteç sistemlerini öngörülebilir, kendi kendini açıklayan ve bileşen kodunu bozmadan marka değişikliklerine dayanıklı hâle getirir.
Sıkça Sorulan Sorular
“Belirteç Adlandırma Kuralları” dersi ücretsiz mi?
Evet — “Belirteç Adlandırma Kuralları” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. CSS Academy kursu toplamda 4 dersten oluşur.
“Belirteç Adlandırma Kuralları” dersinde ne öğreneceğim?
Belirteç adlarını genel, takma ad ve bileşene özel adlandırma katmanlarını kullanarak hiyerarşik biçimde yapılandırın. CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Belirteç Adlandırma Kuralları” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tasarım Belirteçleri Nedir
- Belirteç Adlandırma Kuralları
- CSS Değişkenleriyle Çok Markalı Tema Uygulama
- Belirteç Araçları: Style Dictionary