CSS Variablen

, Custom Properties, Farb- und Spacing-Systeme sowie Dark Mode Grundlagen. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

• Custom Properties definieren und verwenden
• Designwerte zentral pflegen
• Dark Mode mit Variablen vorbereiten

Erklärung

CSS-Variablen heißen Custom Properties. Sie werden mit --name definiert und mit var(--name) verwendet. Häufig liegen globale Werte in :root.

Für Dark Mode können dieselben Variablennamen andere Werte bekommen. Komponenten müssen dann nicht umgeschrieben werden.

Beispiele

:root {
  --color-bg: #ffffff;
  --color-text: #111827;
  --space-3: 0.75rem;
}

[data-theme="dark"] {
  --color-bg: #111827;
  --color-text: #f9fafb;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

Die Komponente verwendet Namen, nicht konkrete Farben.

.card {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-text), transparent 80%);
}

Variablen können auch in modernen CSS-Funktionen eingesetzt werden.

Typische Fehler

• Variablen für einmalige Werte anlegen.
• Unverständliche Namen wie --blue-thing verwenden.
• Dark Mode nur über einzelne Sonderregeln statt über Systemwerte bauen.

Best Practices

• Benenne Variablen nach Zweck oder Skala.
• Halte Farb-, Spacing- und Radiuswerte konsistent.
• Teste Komponenten mit beiden Themes.

Kleine Übung

Baue ein kleines Theme mit Hintergrund, Text, Primärfarbe und drei Abstandswerten. Schalte per Attribut auf Dark Mode um.

Zusammenfassung

CSS sollte Gestaltung systematisch lösen: klare Selektoren, wiederkehrende Werte, responsive Layouts und verständliche Zustände. Gute Stylesheets bleiben auch bei wachsenden Seiten wartbar.

Weiterführende Seiten

• Vorherige Seite: CSS Animationen und Übergänge
• Nächste Seite: CSS Best Practices
• Zur Übersicht
• Farben und Einheiten
• JavaScript Übungen