Von VONA
CSS-Variablen als Fundament eines Design-Systems
Wie man mit nativen CSS Custom Properties ein robustes, wartbares Design-System aufbaut — ohne Build-Tools und ohne Overhead.
CSS Custom Properties — oft als CSS-Variablen bezeichnet — sind seit Jahren in allen modernen Browsern verfügbar. Dennoch werden sie in vielen Projekten noch immer halbherzig eingesetzt: ein paar Farben oben im Stylesheet, ansonsten hart kodierte Werte überall. Das verschenkt erhebliches Potenzial. Wer CSS-Variablen konsequent als Fundament nutzt, bekommt ein Design-System, das wartbar, konsistent und adaptiv ist — und das ohne Build-Tool, Sass oder externe Library.
Der entscheidende Unterschied zwischen Sass-Variablen und nativen CSS Custom Properties liegt in der Laufzeit. Sass-Variablen werden zur Build-Zeit aufgelöst — das resultierende CSS enthält nur noch die finalen Werte. CSS Custom Properties existieren im Browser und können dynamisch geändert werden: per JavaScript, per Media Query, per :root-Override in einem bestimmten Kontext. Das ist der Grund, warum Dark Mode mit CSS-Variablen so elegant funktioniert.
Struktur und Benennung
Eine gute Struktur für CSS-Variablen trennt zwischen primitiven Werten und semantischen Tokens. Primitive Werte sind die rohen Designentscheidungen: --color-gray-900: #111111. Semantische Tokens verweisen auf Primitive und beschreiben ihre Funktion: --color-text: var(--color-gray-900). Diese zweischichtige Struktur erlaubt es, bei einem Theme-Wechsel nur die semantischen Tokens zu überschreiben, ohne die Primitive zu berühren. Dark Mode bedeutet dann nur: [data-theme="light"] { --color-bg: var(--color-gray-100); --color-text: var(--color-gray-900); } — der Rest passt sich automatisch an.
Für Abstände, Schriftgrößen und andere Skalen empfiehlt sich eine systematische Benennung: --space-xs, --space-sm, --space-md, --space-lg, --space-xl und so weiter. Wer diese Skala am Anfang eines Projekts sorgfältig definiert und konsequent verwendet, verhindert das typische Problem inkonsistenter Abstände, bei dem manche Elemente 16px, andere 15px und wieder andere 17px Abstand haben — weil jeder Entwickler seinen eigenen Wert gesetzt hat.
Theming und Kontextvariablen
Ein weiterer Anwendungsfall, der oft übersehen wird: kontextabhängige Variablen. Innerhalb einer Komponente kann man lokale CSS-Variablen definieren, die nur in diesem Kontext gelten. Ein Card-Component kann --card-bg als Variable definieren und lokal überschreiben — ohne globale Klassen oder Inline-Styles zu benötigen. Das macht Komponenten flexibel und wiederverwendbar, ohne ihr Verhalten von außen zu hart zu kodieren.
- Primitive Tokens für rohe Werte, semantische Tokens für Funktionen
- Konsistente Benennung mit Präfix nach Kategorie (color, space, font)
- Dark Mode über Überschreiben semantischer Tokens steuern
- Lokale Variablen in Komponenten für flexible Wiederverwendung
- CSS-Variablen per JavaScript für dynamische Anpassungen nutzen
CSS Custom Properties sind kein Ersatz für ein durchdachtes Design-System — aber sie sind das beste native Fundament, das CSS bietet, um eines aufzubauen. Wer sie konsequent einsetzt, hat weniger Überraschungen bei Designänderungen, weniger inkonsistente Werte im Code und eine deutlich bessere Grundlage für zukünftige Erweiterungen.