CSS-Variablen

TL;DR

CSS-Variablen (Custom Properties) speichern Werte zentral und ermöglichen dynamische Änderungen. Sie sind das Rückgrat für Theming und konsistentes Design.

Was sind CSS-Variablen?

CSS-Variablen (Custom Properties) sind benannte Werte, die in Stylesheets wiederverwendet werden können. Statt einen Farbwert 50x zu wiederholen, definiert man ihn einmal und referenziert ihn überall.

Syntax

• Definition: --primary-color: #2563EB;
• Nutzung: color: var(--primary-color);
• Fallback: color: var(--primary-color, blue);

Vorteile

• Zentrale Änderung: Farbe ändern = 1 Stelle
• Dynamisch: Mit JavaScript änderbar
• Kaskadierend: Folgen CSS-Vererbung
• Theming: Dark Mode durch Variablen-Tausch
• Lesbarkeit: --spacing-lg ist klarer als 32px

CSS-Variablen vs. Sass-Variablen

• Sass: Kompiliert zu festen Werten, nicht änderbar
• CSS: Existieren zur Laufzeit, dynamisch änderbar

CSS-Variablen und Nachhaltigkeit

Variablen fördern sauberen Code:

• Weniger Duplizierung = kleinere CSS-Dateien
• Konsistenz = weniger Fehler
• Einfache Wartung = längere Code-Lebensdauer

Einsatz für Theming

• :root für globale Variablen
• [data-theme="dark"] für Dark Mode
• prefers-color-scheme für System-Präferenz

Fazit

CSS-Variablen sind unverzichtbar für modernes CSS. Sie machen Code wartbarer, konsistenter und ermöglichen Features wie Theming ohne JavaScript-Overhead.