Lange Zeit brauchte man Präprozessoren wie Sass oder Less, um Variablen in CSS zu nutzen. Heute kann CSS das von sich aus – und besser. CSS Custom Properties, umgangssprachlich CSS-Variablen, sind nativ, leben zur Laufzeit im Browser und lassen sich sogar per JavaScript ändern. Wer sie richtig einsetzt, schreibt CSS, das wartbarer, kürzer und dynamischer ist. Dieser Guide erklärt das Konzept von Grund auf und zeigt die Muster, die du im Alltag wirklich brauchst.
Der Unterschied zu Sass-Variablen
Ein häufiges Missverständnis vorweg: Sass-Variablen und CSS Custom Properties sind grundverschieden. Eine Sass-Variable existiert nur während der Kompilierung. Sobald dein Stylesheet gebaut ist, ist sie verschwunden und durch ihren Wert ersetzt. Du kannst sie zur Laufzeit nicht mehr ändern.
Eine CSS Custom Property dagegen lebt im Browser weiter. Sie ist Teil des Cascade und Document Object Model, reagiert auf Media Queries, lässt sich pro Element überschreiben und in Echtzeit per Skript anpassen. Genau diese Dynamik macht sie zu einem mächtigen Werkzeug, das weit über das hinausgeht, was Präprozessoren je konnten.
Definieren und verwenden
Eine Custom Property erkennst du am doppelten Bindestrich. Du definierst sie wie eine normale Eigenschaft und liest sie mit der Funktion var() aus:
- Definition:
--primaer: #2563eb;– meist im:root-Selektor, damit die Variable global gilt. - Verwendung:
color: var(--primaer);setzt die Farbe auf den definierten Wert. - Fallback:
var(--primaer, #000)nutzt Schwarz, falls die Variable nicht definiert ist – eine eingebaute Sicherheitsschleife.
Der :root-Selektor entspricht dem <html>-Element und ist der natürliche Ort für globale Design-Tokens wie Farben, Abstände und Schriftgrößen. So sammelst du alle zentralen Werte an einer Stelle.
Vererbung und Scope: Der eigentliche Trick
Hier liegt die wahre Stärke. Custom Properties folgen der CSS-Kaskade und werden vererbt. Du kannst eine Variable global definieren und sie in einem bestimmten Bereich überschreiben:
Definierst du --abstand: 1rem im :root, gilt das überall. Setzt du innerhalb einer bestimmten Komponente --abstand: 2rem, übernimmt diese Komponente und alle ihre Kinder den größeren Wert – der Rest der Seite bleibt unberührt. Dieses lokale Überschreiben ist mit Sass-Variablen schlicht nicht möglich und eröffnet ganz neue Muster für komponentenbasiertes Design.
Theming: Der Paradeanwendungsfall
Custom Properties sind die saubere Grundlage für Themes. Du definierst dein gesamtes Farbschema als Variablen und tauschst es an einer einzigen Stelle aus. Ein Beispiel:
- Im
:rootlegst du Standardfarben fest:--bg: #ffffff; --text: #111111;. - Für eine Variante änderst du nur diese Variablen, etwa über eine Klasse
.theme-kontrastam<body>. - Alle Komponenten, die
var(--bg)undvar(--text)nutzen, passen sich automatisch an – ohne dass du eine einzige Komponentenregel anfassen musst.
Genau dieses Muster nutzen die meisten modernen Design-Systeme. Hinweis am Rande: Auf kotsch.tech setzen wir bewusst auf ein durchgängig helles Erscheinungsbild ohne Dark Mode, doch dieselbe Technik trägt jedes Theming, vom Hochkontrast-Modus bis zu saisonalen Farbvarianten.
Berechnungen mit calc()
Custom Properties spielen wunderbar mit calc() zusammen. Du kannst eine Basisgröße definieren und davon abgeleitete Werte berechnen: --basis: 8px; und dann padding: calc(var(--basis) * 2). So baust du ein konsistentes Abstandssystem, bei dem jede Größe ein Vielfaches einer Grundeinheit ist. Änderst du die Basis, skaliert das ganze System mit – ideal für ein durchdachtes Spacing-System.
Ein eleganter Trick sind fluide Werte: Kombiniert mit clamp() erzeugst du Schriftgrößen, die zwischen einem Minimum und Maximum mit dem Viewport mitwachsen. Variablen machen solche Formeln lesbar und an einer Stelle pflegbar.
Custom Properties per JavaScript steuern
Der größte Unterschied zu Präprozessoren: Du kannst Custom Properties zur Laufzeit ändern. Mit element.style.setProperty('--primaer', '#e11d48') setzt du einen neuen Wert, und der Browser aktualisiert alles, was diese Variable nutzt, sofort. Das eröffnet dynamische Effekte:
- Live-Theme-Wechsel über einen Umschalter, ohne Stylesheets neu zu laden.
- Interaktive Elemente, die der Mausposition folgen, indem du Koordinaten in Variablen schreibst.
- Fortschrittsanzeigen, deren Füllstand du über eine einzige Variable steuerst.
Auslesen kannst du sie übrigens mit getComputedStyle(element).getPropertyValue('--primaer'). Diese Brücke zwischen CSS und JavaScript ist ein Werkzeug, das überraschend wenige Entwickler voll ausschöpfen.
Praxis-Tipps und häufige Fehler
Ein paar Hinweise, die dir Frust ersparen:
- Groß- und Kleinschreibung zählt:
--Primaerund--primaersind zwei verschiedene Variablen. - Ungültige Werte führen zum Fallback: Enthält eine Variable einen für die Eigenschaft ungültigen Wert, fällt der Browser auf den geerbten oder initialen Wert zurück – das kann verwirren.
- Konsistente Benennung: Etabliere ein Schema wie
--color-primary,--space-md,--font-lg. Eine durchdachte Namenskonvention ist die halbe Miete für wartbares CSS. - Nicht übertreiben: Nicht jeder Wert muss eine Variable sein. Reserviere sie für Design-Tokens, die mehrfach vorkommen oder sich ändern können.
Browser-Support und Einordnung
CSS Custom Properties werden seit 2017 von allen relevanten Browsern unterstützt und sind heute ein vollkommen sicheres Standardwerkzeug. Den genauen Stand kannst du jederzeit prüfen – mehr dazu in unserem Beitrag zu caniuse. Wer Custom Properties in einem Utility-Framework nutzen will, findet in der Tailwind-CSS-Einführung die passenden Konfigurationswege, denn auch dort bilden CSS-Variablen die Basis der Theme-Engine. Zum gefahrlosen Ausprobieren eignet sich ein Online-Editor – siehe unseren Artikel zu CodePen.
Mein Fazit: CSS Custom Properties sind kein nettes Extra, sondern ein Grundpfeiler modernen CSS. Sie ersetzen Präprozessor-Variablen in den meisten Fällen, fügen Laufzeit-Dynamik hinzu und machen großes CSS überhaupt erst wartbar. Wenn du heute ein Design-System aufbaust, fang mit einer durchdachten Sammlung von Custom Properties an – alles andere fällt dir danach leichter.