Welcher Frontend-Entwickler kennt nicht die Ausdrücke DRY (Don’t repeat yourself) und WET (Write everything twice)? Und da kommen die CSS Preprocessoren ins Spiel. Sie helfen dabei, den Code möglichst einfach (DRY) zu halten und unnötige Wiederholungen (WET) sowie zusätzlichen Arbeitsaufwand zu vermeiden.

Was sind CSS Preprocessoren?

CSS Preprocessoren erweitern CSS um nützliche Komponenten wie Funktionen, Verschachtelungen, Variablen und Mixins. Die Bekanntesten sind SASS, LESS und Stylus. Die eigene Syntax der einzelnen Preprocessoren wird durch ein Tool in normale CSS-Dateien umgewandelt. Im Folgenden zeigt Euch ein Beispiel die Verwendung von Variablen mit LESS. Die genauere Anwendung weiterer Funktionen auch von anderen CSS Preprocessoren werde ich in weiteren Artikeln erläutern.

Standard CSS-Aussehen

#foo {
     color: #eee;
}

p {
     color: #eee;
}

Beispiel LESS Variable

@font-color: #eee;

#foo {
     color: @font-color;
}

h2 {
     color: @font-color;
}

Vorteil: Dank der Variablen genügt es, globale Änderungen nur noch an einer Stelle vorzunehmen.

Vorteile von CSS Preprocessoren

Wie schon im oberen Absatz erwähnt, helfen CSS Preprocessoren dabei, den Development-Workflow zu vereinfachen und zu beschleunigen. Daraus resultieren für mich zwei wesentliche Vorteile:

1. CSS Preprocessoren vereinfachen CSS

Bei komplexeren Webprojekten werden Stylesheets oft extrem lang. Farbcodes, die Schriftart und die Hintergrundfarbe wiederholen sich. Mit der Einführung von beispielsweise Mixins ist es möglich, ein wiederholendes Aussehen eines Elementes einmal zu definieren und an vielen Stellen einzusetzen. So minimiert sich der Code und die anzupassenden Stellen bei späteren Änderungen sind leichter zu finden.

Dies kann bei dem dynamischen Stylesheet SASS wie folgt aussehen:

Standard CSS-Aussehen

#foo {
     border-radius: 10px;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
}

Beispiel SASS Mixins

@mixin border-radius($radius) {
     border-radius: $radius;
     -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
}

#foo {
     @include border-radius(10px);
}

2. CSS Preprocessoren sparen Zeit

Kürzerer Code bedeutet: weniger Zeitaufwand für das Schreiben. Das macht sich schon bei der anfänglichen Erstellung des CSS bemerkbar. So wird, wie man im obigen Beispiel erkennen kann, aus dem für alle Browser kompatiblen Drei Zeiler „border-radius“ eine Zeile mit flexibler Radiusstärke. Dies ist nur ein Beispiel von vielen für die Vereinfachung und somit schnellere Erstellung des Codes.
Auch spätere globale Änderungen sind schneller umzusetzen, da man nur noch an einer zentralen Stelle die Anweisungen ändern muss und diese sich automatisch auf alle Elemente übertragen.

Fazit – CSS Preprocessoren sind super

Auch wenn viele glauben, dass sie mit dem einfachen CSS sehr gut zurechtkommen und sich keine Zeit für das Einarbeiten in CSS Preprocessoren nehmen möchten, rate ich jedem, dies noch einmal zu überdenken. Der anfängliche Aufwand lohnt sich und wird mit späteren Zeitersparnissen belohnt. Wer noch nicht weiß, welcher CSS Preprocessor der richtige ist, kann sich in meinen nächsten Artikeln genauer über die einzelnen Möglichkeiten informieren. Dort werde ich auch tiefer darauf eingehen, wie viele Möglichkeiten CSS Preprocessoren bieten und wie man sie anwendet.