LESS räumt CSS Stylesheets auf

Aktuell arbeite ich an einem Relaunch einer News-Webseite. Bei der Stukturierung der einzelnen HTML Elemente ist aufgefallen, dass die CSS Datei zu der Seite mittlerweile knapp 2000 Zeilen umfasst. Werden alle enthaltenen CSS-Direktiven noch benötigt? Welche sind überflüssig und können ohne Seiteneffekte entfernt oder zusammen gefasst werden?

Auf der Suche nach einem CSS Framework, welches die Strukturierung von CSS Inhalten bzw. die Definition von Variablen, insbesondere für Farbwerte, erlaubt, ist unser Team auf das Projekt LESS gestoßen. Es bietet folgende Funktionen:

  • Variablendeklaration z. B. über @textfarbe: #4D926F;
  • Wiederverwendung von ganzen CSS Blöcken an mehreren Stellen z. B. kann so ein Gradient an mehreren Stellen eingesetzt, und die Farbwerte sogar parametrisiert werden
  • Schachtelung der CSS Styles anstatt Angabe immer feinerer Classenhierarchien aufgrund der DOM Struktur
  • und vieles mehr….

Alle Beispiele befinden sich auf der Projektwebseite: http://www.lesscss.org/

Darüber hinaus sei noch angemerkt, dass auch das SASS Projekt ähnliche Funktionen bietet, jedoch die Notation teilweise abweichend ist. Die Entwicklungsumgebung IntelliJ IDEA bringt in der aktuellen Version 10.5 jedenfalls ein besseres Syntax-Highlighting für LESS mit.

Die Einbindung erfolgt zur Entwicklungszeit über ein Javascript im Header der HTML-Seite. Das Skript generiert aus den *.less Dateien zur Laufzeit das resultierende CSS File. Für einen Buildprozess empfiehlt sich der, auf Node.js basierende, Compiler. Dieser kann z. B. von einem Maven Plugin angesteuert werden.

Alles in Allem bietet das Projekt LESS einen vielversprechenden Ansatz umfangreiche CSS Dateien in kleinere, logisch zusammenhängende Einheiten zu bündeln. Man verliert auch nichts, wenn man LESS einfach mal bei einem Projekt ausprobiert, da man im schlimmsten Falle einfach das herausgerenderte CSS File wieder ganz normal verwenden kann.

Was habt ihr für Erfahrungen mit CSS Frameworks gemacht? Plan ihr den Einsatz? Ich würde mich sehr über Feedback in den Kommentaren freuen :)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.