CSS Custom Properties – im Volksmund oft als CSS-Variablen bezeichnet – revolutionieren die Art und Weise, wie wir moderne Stylesheets schreiben. Im Gegensatz zu statischen Variablen in Sass oder LESS bleiben CSS-Variablen im Browser dynamisch. Das bedeutet, sie können zur Laufzeit verändert werden, reagieren auf Media Queries und lassen sich nahtlos mit JavaScript steuern, was sie zum Grundpfeiler moderner Design-Systeme macht.

Grundlegende Syntax und Deklaration

Variablen definieren und anwenden
/* Globale Definition in :root */
:root {
  --color-primary: #4f46e5;
  --color-bg: #f8fafc;
  --color-text: #1e293b;
  --border-radius: 10px;
  --main-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --font-main: 'Geist', sans-serif;
}

/* Verwendung mit der var() Funktion */
.card {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--border-radius);
  box-shadow: var(--main-shadow);
  font-family: var(--font-main);
}

/* Fallback-Werte für maximale Sicherheit */
.btn {
  background: var(--color-accent, #000000);
}

Geltungsbereich (Scoping) & Vererbung

Ein entscheidender Vorteil von Custom Properties ist das Scoping. Während Variablen in Preprozessoren global oder blockbasiert während der Kompilierung aufgelöst werden, folgen CSS-Variablen der Kaskade. Sie können eine Variable global definieren und lokal überschreiben.

Lokales Overwriting
/* Standard-Button-Styling */
:root {
  --btn-color: #6366f1;
}

.btn {
  background: var(--btn-color);
  padding: 0.5rem 1rem;
}

/* Spezifischer Scope: Überschreiben im Container */
.warning-section {
  --btn-color: #f59e0b;
}

.danger-section {
  --btn-color: #ef4444;
}

/* Buttons in diesen Sektionen passen sich automatisch an */

Dark Mode effizient umsetzen

Früher mussten hunderte Zeilen CSS dupliziert werden, um einen Dark Mode zu erstellen. Mit Variablen ändern Sie lediglich die Werte an einer zentralen Stelle. Dies verbessert die Performance und Wartbarkeit Ihres Codes massiv.

Theme-Management mit Variablen
/* Hell-Modus (Standard) */
:root {
  --surface: #ffffff;
  --on-surface: #111827;
  --accent: #3b82f6;
  --border-color: #e5e7eb;
}

/* Dunkel-Modus via Attribut oder Media Query */
[data-theme="dark"] {
  --surface: #111827;
  --on-surface: #f9fafb;
  --accent: #60a5fa;
  --border-color: #374151;
}

/* Automatische System-Erkennung */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #111827;
    --on-surface: #f9fafb;
  }
}

Interaktion mit JavaScript

Da Custom Properties Teil des DOM sind, kann JavaScript auf sie zugreifen. Dies ermöglicht Echtzeit-Anpassungen wie Farbwähler, Schriftgrößen-Slider oder dynamische Animationen basierend auf Nutzerinteraktionen.

CSS-Variablen per JS manipulieren
// Wert einer Variable auslesen
const rootStyles = getComputedStyle(document.documentElement);
const primaryColor = rootStyles.getPropertyValue('--color-primary');

// Wert dynamisch ändern
document.documentElement.style.setProperty('--color-primary', '#10b981');

// Theme-Umschalter Logik
const toggleTheme = () => {
  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
  document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
};

Design Tokens Systematik

Ein modernes Design-System nutzt Variablen als "Tokens" für Abstände, Typografie und Schatten, um Konsistenz über die gesamte Anwendung hinweg zu gewährleisten.

Skalierbare Abstände & Typografie
:root {
  /* Spacing Scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-4: 1rem;
  --s-8: 2rem;

  /* Typography Scale */
  --f-xs: 0.75rem;
  --f-base: 1rem;
  --f-xl: 1.25rem;
  --f-display: clamp(1.5rem, 4vw, 3rem);

  /* Animationen */
  --transition-fast: 150ms ease-in-out;
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

Best Practices für sauberes CSS

  • Semantik vor Farbe: Nutzen Sie Namen wie --color-action statt --color-blue. So bleibt der Name gültig, auch wenn sich das Design ändert.
  • Zentrale Dokumentation: Definieren Sie alle Kern-Variablen in der :root Ihrer Haupt-CSS-Datei.
  • Komponenten-Variablen: Nutzen Sie lokale Variablen für Komponenten (z.B. --card-padding), um Seiteneffekte zu vermeiden.
  • Fallbacks einplanen: Nutzen Sie immer einen Standardwert in der var() Funktion für kritische UI-Elemente.
  • Kombination mit calc(): CSS-Variablen sind perfekt für Berechnungen: width: calc(100% - var(--sidebar-width));.

Optimieren Sie Ihr CSS heute

Nutzen Sie unsere kostenlosen Tools, um Ihren Code zu bereinigen und zu komprimieren.