Custom Properties

CSS Custom Properties, auch bekannt als CSS-Variablen, sind eine Funktion von CSS, die es ermöglicht, Werte zu definieren und an mehreren Stellen im Stylesheet wiederzuverwenden. Im Gegensatz zu Präprozessor-Variablen (wie in SASS oder LESS) sind CSS Custom Properties dynamisch, zur Laufzeit änderbar und unterliegen der Kaskade und Vererbung.

Syntax

Custom Properties werden mit einem doppelten Bindestrich (—) definiert und mit der var()-Funktion verwendet:

:root {
  --primary-color: #3498db;
  --spacing-unit: 1rem;
}

.element {
  color: var(--primary-color);
  margin: var(--spacing-unit);
}

:root {
  --primary-color: #3498db;
  --spacing-unit: 1rem;
}

.element {
  color: var(--primary-color);
  margin: var(--spacing-unit);
}

Wichtige Eigenschaften

• Dynamische Änderbarkeit: Werte können zur Laufzeit per JavaScript geändert werden
• Vererbung: Custom Properties werden vererbt
• Fallback-Werte: var() akzeptiert Standardwerte für den Fall, dass die Variable nicht definiert ist
• Kaskadenwirkung: Werte können auf verschiedenen Ebenen überschrieben werden

Beispiele

Grundlegende Verwendung

:root {
  --main-bg-color: brown;
  --main-text-color: #fff;
  --main-padding: 15px;
}

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

:root {
  --main-bg-color: brown;
  --main-text-color: #fff;
  --main-padding: 15px;
}

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

Fallback-Werte

.element {
  /* Wenn --main-color nicht existiert, wird #000 verwendet */
  color: var(--main-color, #000);
  
  /* Mehrere Fallbacks */
  font-size: var(--font-size, var(--default-font-size, 16px));
}

.element {
  /* Wenn --main-color nicht existiert, wird #000 verwendet */
  color: var(--main-color, #000);
  
  /* Mehrere Fallbacks */
  font-size: var(--font-size, var(--default-font-size, 16px));
}

Dynamische Änderung mit JavaScript

// Variable ändern
document.documentElement.style.setProperty('--primary-color', 'red');

// Variable auslesen
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

// Variable ändern
document.documentElement.style.setProperty('--primary-color', 'red');

// Variable auslesen
const color = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-color');

Theming mit Custom Properties

:root {
  --text-color: #333;
  --bg-color: #fff;
}

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

body {
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: color 0.3s, background-color 0.3s;
}

:root {
  --text-color: #333;
  --bg-color: #fff;
}

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

body {
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: color 0.3s, background-color 0.3s;
}

Komplexe Berechnungen

:root {
  --base-size: 16px;
  --scale: 1.2;
  --h1: calc(var(--base-size) * var(--scale) * var(--scale) * var(--scale));
  --h2: calc(var(--base-size) * var(--scale) * var(--scale));
  --h3: calc(var(--base-size) * var(--scale));
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

:root {
  --base-size: 16px;
  --scale: 1.2;
  --h1: calc(var(--base-size) * var(--scale) * var(--scale) * var(--scale));
  --h2: calc(var(--base-size) * var(--scale) * var(--scale));
  --h3: calc(var(--base-size) * var(--scale));
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }

Vorteile gegenüber Präprozessor-Variablen

• Laufzeitänderungen: Werte können dynamisch per JavaScript geändert werden
• Browserunterstützung: Native CSS-Funktion (kein Kompilierungsschritt nötig)
• DOM-bezogen: Werte können für bestimmte Elemente überschrieben werden
• Zugriff in JavaScript: Einfache Manipulation möglich

Best Practices

• Benennungskonventionen: Klare, beschreibende Namen verwenden (z.B. –color-primary statt –cp)
• Dokumentation: Custom Properties im :root-Bereich dokumentieren
• Fallbacks: Immer sinnvolle Standardwerte bereitstellen
• Performance: Übermäßige Verwendung komplexer Berechnungen vermeiden

Browserunterstützung

CSS Custom Properties werden von allen modernen Browsern unterstützt (ab IE11 nicht nativ). Für ältere Browser kann ein PostCSS-Plugin verwendet werden.

Leistungsstarke Möglichkeit

CSS Custom Properties bieten eine leistungsstarke Möglichkeit, Stylesheets wartbarer und flexibler zu gestalten. Sie ermöglichen thematische Änderungen, konsistente Designsysteme und dynamische Anpassungen ohne CSS-Präprozessoren.