Ein Lichtblick im CSS-Dschungel

Wer schon einmal mit Cascading Stylesheets gearbeitet hat, weiß, was Webentwickler so richtig zur Weißglut treiben kann. Denn im Vergleich zu modernen, nativen Sprachen zur Oberflächenbeschreibung legt CSS Webentwicklern Steine verschiedener Größen in den Weg. Viele Beschreibungen in CSS fühlen sich wie „von hinten durch die Brust ins Auge“ und schlichtweg nicht intuitiv an.

Es existieren Frameworks wie Famo.us und GSS, die die Funktionsweise von CSS komplett umkrempeln. Allerdings sind sie zum einen noch nicht ausgereift genug, um CSS gänzlich zu ersetzen, und zum anderen basieren sie auf JavaScript was einen Teil der Nutzer schlichtweg ausschließen kann.

Eine weitere Alternative sind CSS-Präprozessoren wie LESS oder Sass. Sie versuchen der CSS-Problematik auf einer anderen Ebene zu begegnen – bevor sie überhaupt entstehen.

Was ist ein Präprozessor? Ein Präprozessor verarbeitet sogenannten Präprozessorcode zu CSS-Code, welcher letztendlich vom Browser interpretiert wird. Das heißt, dass man mit seiner Hilfe in der Lage ist, CSS auf andere Art und Weise zu formulieren.

Die drei am weitesten verbreiteten CSS-Präprozessoren sind LESS, SASS und Stylus. Sie erlauben einen Teil des bei CSS auf der Strecke gebliebenen Entwicklerkomforts wieder herzustellen.

Alle drei Sprachen sind Supersets (engl. Übermenge) von CSS. Das heißt, dass sie standardmäßigen CSS-Code so wieder ausgeben, wie er eingelesen wird. Das erleichtert den Transfer von bestehenden Projekten und die Einbindung von CSS-Schnipseln, bzw. Bibliotheken. Innerhalb eines Projektes mal mit und mal ohne sie zu arbeiten sollte allerdings vermieden werden, weil das resultierende CSS mit wachsender Größe nur mit größerem Aufwand wieder als Präprozessorcode eingebettet werden kann.

Besser coden mit CSS-Präprozessoren

Der von Less, Sass und Stylus produzierte CSS-Code ist deutlich weniger fehlerträchtig als „von Hand“ Erstellter. Nicht zuletzt, weil Sie den eingelesenen Code vor der Umwandlung auf Syntax-Fehler prüfen und auf solche hinweisen.

Der CSS-Standard wird, wie bereits erwähnt, nicht erweitert, sondern Möglichkeiten geboten, CSS effizienter zu beschreiben. Less, Sass und Stylus gleichen sich in diesem Bereich zu großen Teilen: Sie alle unterstützen unter Anderem die Schachtelung von Selektoren, die Verwendung von Konstanten bzw. Wiederverwendung von ganzen Regeln als Mixins und erleichtern somit die Arbeit mit, unter Anderem, font-stacks und Farbschemata.

Alle drei Präprozessoren bieten durch ihre Fähigkeiten einen immensen Vorteil gegenüber einfachem CSS. Untereinander sind die Unterschiede eher marginal. Momentan setzen wir Stylus für eines unserer Projekte ein.

Wer regelmäßig (oder auch gelegentlich) mit CSS arbeitet, sollte unbedingt einen Blick auf CSS-Präprozessoren werfen. Codepen bietet eine hervorragende Umgebung zum Experimentieren mit Less, Sass und Stylus, mitsamt den Bibliotheken Bourbon, Lesshat und nib.

Wer einen noch automatisierteren CSS-Entwicklungsprozess anstrebt, der sollte sich über Postprozessoren wie z.B. Autoprefixer und Minifier informieren.

Was sind Eure Erfahrungen und was setzt Ihr im Alltag ein?