CSS-Variablen auf dem Vormarsch – diese Vorteile bringen sie für Webentwickler mit sich
Kommentare

Egal in welcher Programmiersprache: Variablen sind besonders nützliche Helfer, um leicht lesbaren und wiederverwendbaren Code zu schreiben. Das gilt auch für die immer beliebter werdenden CSS-Variablen, auch wenn sie bisher nur im Firefox ab Version 31 unterstützt werden.

Neben der Code-Wiederverwendbarkeit und –Lesbarkeit bieten sie aber auch noch einige weitere Vorteile, die Jacob Gube zusammenfasst.

Hauptkomponenten von CSS-Variablen

Es gibt drei Hauptkomponenten, mit denen man sich für die Nutzung von CSS-Variablen beschäftigen sollte: Custom Properties, var ()-Funktionen und :root-Pseudo-Klassen. Mit einem Custom Property kann zunächst der Name des Properties definiert werden, indem ihm zwei Bindestrichen vorangestellt werden, die var()-Funktion sorgt anschließend dafür, dass sich die Custom Properties auch nutzen lassen.

Sie können zudem zwar grundsätzlich in jeder Styling-Regel spezifiziert werden, in den meisten Fällen sorgt eine Platzierung in der höchsten HTML-Ebene aber für eine bessere Maintainability und leichtere Lesbarkeit.

Vorteile der CSS-Variablen

Viele Webentwickler recyceln bestimmte CSS-Property-Werte wie zum Beispiel Abstände, Schriftgrößen oder Farben in ihren Webentwicklungsprojekten. Gerade hierfür bietet der Einsatz von CSS-Variablen einige Vorteile, vor allem, wenn im Nachhinein einzelne Property-Werte geändert werden sollen. So lässt sich mit CSS-Variablen viel Zeit beim Ändern sparen, weil deutlich weniger Zeilen Code geändert werden müssen; zudem wird die Wahrscheinlichkeit, irgendwo einen Fehler zu machen, minimiert.

Genauso sorgen Custom Properties für eine einfachere Lesbarkeit des Stylesheets und verleihen einzelnen Property-Declarations mehr Bedeutung. Allerdings dürfen einige Faktoren beim Einsatz von CSS-Variablen nicht außer Acht gelassen werden. So sind Custom Properties im Gegensatz zu CSS Properties Case-sensitive – darum sind zum Beispiel –main-bg-color und –MAIN-BG-COLOR ein jeweils eigenständiges Property. Wird ein Custom Property zudem mehr als einmal angegeben, folgt das Stylesheet den normalen CSS-Cascading und Regeln der Vererbung.

Es lassen sich auch Fallback-Werte mit der var()-Funktion einrichten, indem das Fallback-Property-Value als zusätzliches Argument mit einem Komma abgetrennt wird. Aufpassen muss man auch, um CSS Properties keine falschen Werttypen zuzuteilen – etwa, indem man auf treffende Custom-Property-Namen achtet.

Wie eingangs erwähnt, werden CSS-Variablen derzeit nur im Firefox unterstützt. Allerdings dürfte der Support auch nach und nach in den anderen Browsern Einzug halten – immerhin stellen sie eine überaus nützliche Funktionalität für Webentwickler dar. Und es gibt ja bereits einige Möglichkeiten, CSS-Variablen zu nutzen – etwa das currentColor-Keyword, das wir euch vor einiger Zeit bereits ausführlicher vorgestellt haben.

Aufmacherbild: Benefit concept: Two pawns in front of toy dice von Shutterstock / Urheberrecht: lculig

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -