Neden CSS Özel Özellikler?
Sass gibi ön işlemciler değişkenler sunar. Ancak bu değişkenler derleme aşamasında kullanılır ve çalışma zamanında erişilemez. CSS Özel Özellikler (Custom Properties) ise çalışma zamanında (runtime) canlı ve dinamiktir. Aşağıdaki karşılaştırma bu farkı net bir şekilde ortaya koymaktadır:
/* Ön işlemci: derlenir, çalışma zamanı erişimi yok */
$primary: #0066cc;
/* CSS Özel Özellikler: canlı, dinamik */
:root {
--primary: #0066cc;
--primary-hover: #0052a3;
--spacing-unit: 8px;
--border-radius: 4px;
}
.button {
background: var(--primary);
padding: calc(var(--spacing-unit) * 1.5);
border-radius: var(--border-radius);
}Çalışma zamanı değişkenleri, JavaScript olmadan anında tema değişimine olanak tanır.
Tasarım Token Mimarisi
Değişkenlerinizi hiyerarşik bir şekilde yapılandırın:
Katman 1: Temel (Primitives)
:root {
--blue-50: #e6f0ff;
--blue-100: #b3d1ff;
--blue-500: #0066cc;
--blue-900: #002d5c;
--space-1: 4px;
--space-2: 8px;
--space-4: 16px;
--space-8: 32px;
}Katman 2: Anlamsal Tokenler (Semantic Tokens)
:root {
--color-primary: var(--blue-500);
--color-primary-hover: var(--blue-900);
--color-background: #ffffff;
--color-text: #1a1a1a;
--spacing-component: var(--space-4);
--spacing-section: var(--space-8);
}Katman 3: Bileşen Tokenleri (Component Tokens)
.button-primary {
--button-bg: var(--color-primary);
--button-color: white;
--button-padding: var(--spacing-component);
background: var(--button-bg);
color: var(--button-color);
padding: var(--button-padding);
}Bileşen Kütüphanesi Yapısı
Bileşenlerinizi modüler bir şekilde organize edin. Örnek bir buton bileşeni dosyası:
/* components/button.css */
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--button-gap, 8px);
padding: var(--button-padding-y, 12px) var(--button-padding-x, 24px);
/* ... */
}Bu yapı sayesinde her bileşen kendi tokenlerini taşır ve tasarım sistemi genelinde tutarlılık sağlanır.