Webdesign · Entwicklung · SEO
CSS-Variablen
CSS-Variablen erklärt: Werte gemeinsam nutzen | scinet
Redaktionell geprüft ·
Verständlich erklärt
CSS-Variablen sind benutzerdefinierte Eigenschaften in einem Stylesheet. Ihr technischer Name lautet Custom Properties. Ein Name wie --farbe-akzent steht für einen Wert, den du an mehreren Stellen verwenden kannst. Abgerufen wird er mit var().
Stell dir vor, die Akzentfarbe deiner Website soll sich ändern. Wenn zwanzig Elemente auf denselben Wert zugreifen, musst du nicht zwanzig Farbangaben suchen. Das klingt klein, macht spätere Anpassungen aber nachvollziehbarer. Voraussetzung ist, dass die Elemente tatsächlich die Variable verwenden.
Ein Wert, mehrere Stellen
Mit :root kannst du einen gemeinsamen Ausgangswert für das Dokument definieren. Eine Schaltfläche und ein Hinweisrahmen können darauf zugreifen. Wenn beide dieselbe inhaltliche Rolle haben, ist das sinnvoll.
Ich würde trotzdem nicht jede rote Fläche automatisch an dieselbe Variable hängen. Eine Fehlermeldung und die Markenfarbe können heute gleich aussehen, später aber unterschiedliche Aufgaben erfüllen. Benenne Werte deshalb nach ihrer Bedeutung. So bleibt bei einer Änderung verständlich, was gemeinsam reagieren soll.
Auf einen Blick
Warum eine Variable nicht überall gleich sein muss
Eigenschaften mit -- werden normalerweise vererbt. Du kannst den Wert in einem bestimmten Bereich überschreiben, etwa für eine dunkle Kontaktbox. Die enthaltenen Elemente verwenden dann den dort wirksamen Wert. Genau das unterscheidet diese Technik von einem einfachen Suchen und Ersetzen.
Mit @property lassen sich zusätzlich Typ, Anfangswert und Vererbungsverhalten registrieren. Für den Einstieg brauchst du diese Registrierung nicht zwingend. Sie wird interessant, wenn du strengere Regeln für die Werte oder bestimmte Animationen benötigst.
Fallbacks helfen, lösen aber nicht jeden Fehler
var(--farbe-akzent, #be1622) enthält einen Ersatzwert. Er greift beispielsweise, wenn die unregistrierte Variable nicht definiert ist. Er macht aus einem ungeeigneten Wert aber nicht automatisch einen gültigen Farbwert. Wenn eine vorhandene Variable eine Länge enthält und als Farbe verwendet wird, kann die Deklaration ungültig werden.
Außerdem lassen sich mit var() keine Selektoren oder Eigenschaftsnamen erzeugen. Auch ein gewöhnlicher Media-Query-Breakpoint kann damit nicht einfach parametrisiert werden. Halte das Beispiel zunächst klein und prüfe den berechneten Stil im Browser.
Passend dazu: Design-Tokens · Sass / SCSS · Bootstrap 6 Alpha im Vergleich.
Codebeispiel aus der Praxis
Gemeinsame Farbe mit lokaler Variante
Eigenes Beispiel: Link und Rahmen nutzen denselben Wert. Innerhalb von .kontaktbox wird er überschrieben.
:root { --farbe-akzent: #be1622; }
.kontaktlink { color: var(--farbe-akzent); }
.hinweis { border: 2px solid var(--farbe-akzent); }
.kontaktbox { --farbe-akzent: #76101a; }Quellen und weiterführende Informationen
- Dokumentation Using CSS custom properties MDN Web Docs · Geprüft
- Dokumentation var() MDN Web Docs · Geprüft
- Dokumentation @property MDN Web Docs · Geprüft
- Dokumentation Sass Variables Sass · Geprüft
