Es ist noch gar nicht lange her, da konnte ich mir nicht vorstellen, mit einem Preprozessor wie LESS zu arbeiten. Aber inzwischen bin ich auf den Geschmack gekommen.
Was LESS ist habe ich in diesem Artikel erklärt. Im Prinzip ist es eine Erweiterung der CSS-Syntax. LESS bietet das, was man sich von der nächsten CSS-Version wünschen würde: Man kann wiederverwendbare Variablen definieren, Styles verschachteln und Vieles mehr.
Der Haken dabei: Die Syntax von LESS muss per Compiler in CSS umgeschrieben werden, denn sonst kann der Browser die Angaben nicht lesen. Das heisst, wer daran gewöhnt ist, Anpassungen und Korrekturen in der CSS-Datei per FTP auf dem Server zu machen, muss sich umorientieren. Denn das funktioniert dann nicht mehr.
Änderungen macht man ausschließlich im less-File, die CSS-Datei ist nur noch eine Art Ausgabeformat, das automatisch erzeugt wird. Die CSS-Datei fasst man gar nicht mehr an.
FTP: Bequem, aber wenig robust
Nie wieder einen Fehler im Stylesheet mal eben schnell per FTP korrigieren? Jedes Mal die less-Datei suchen und den Kompilierer anschmeissen? Das klingt fürchterlich umständlich, aber es ist halb so schlimm.
Und – seien wir ehrlich – eine besonders elegante Methode ist es nicht, per FTP auf einem Server herumzubasteln. Womöglich noch an einer Seite, die live im Netz steht. Früher oder später kommt der Tag, an dem man aus Versehen die falsche Datei überschreibt.
LESS und MAMP sind ein perfektes Team
Die Alternative zu FTP ist der Weg über einen lokalen Server (z.B. MAMP). Erst dann, wenn auf dem MAMP-Server alles passt, werden die Dateien zum entfernten Server geschickt. In meine lokale Entwicklungsumgebung war die LESS-Maschinerie schnell eingebaut. Danach ging es eigentlich nur noch darum, die Abläufe rund um MAMP so zu organisieren und zu konfigurieren, dass alle Komponenten gut zusammenspielen.
Meine LESS-Dateien organisiere ich mit Codekit, das auch für die automatische Kompilierung im Hintergrund sorgt. Funktioniert die Seite auf dem MAMP-Server, synchronisiere ich die Dateien per Transmit mit dem entfernten Server. Gegen Ende eines Projekts ist es nur die style.css, die von MAMP auf den Server beim Provider wandert.
Der große Gewinn: CSS in Modulen
Zwar kann man auch eine CSS-Datei in einzelne Module aufteilen und diese Teile dann per @import zu einer großen Datei zusammenfügen. Aber für die Ladezeit einer Seite ist das sehr ungüstig, denn die Dateien werden einzeln und nacheinander abgerufen. CSS-Anweisungen sollten deshalb in einer einzigen Datei zusammengefasst werden.
Mit LESS umschifft man das Problem: Wenn man hier per @import viele Teile zu einer großen .less-Datei zusammenbaut, dann wirkt sich das auf die Performance einer Seite nicht negativ aus. Denn aus der less-Datei wird ja eine css-Datei erzeugt und danach sind alle @import-Anweisungen aus der less-Datei verschwunden. Das Ergebnis ist eine große, zusammenhängende CSS-Datei ohne @import-Syntax und ähnliche Stolpersteine.
Ein praktischer Baukasten
CSS-Dateien zu wiederverwendbaren Modulen umzuschreiben ist ein Stück Arbeit. Man muss sehr genau überlegen, welche Funktion jede CSS-Anweisung hat. Es gibt Basismodule (z. B. reset.less, typografie.less oder forms.less), die bei jedem Projekt gleich sind. Es gibt Module, die die Navigation steuern (z. B. nav_horizontal.less, nav_vertical.less oder nav_dropdown.less), die je nach Art des Projekts zum Einsatz kommen. Und es gibt solche, die die Anweisungen für ein ganz spezielles Design enthalten (skin.less).
Codekit ist bei der Arbeit mit LESS-Modulen eine große Hilfe. Die Teile, die ich immer wieder verwende, lege ich in so genannten „Frameworks“ ab. CodeKit sorgt dafür, dass jedes dieser wiederverwendbaren Module nur einmal auf meiner Festplatte vorhanden ist. Ich kann verschiedene LESS-Module mit einem Projekt-Stylesheet verknüpfen; ändere ich etwas am LESS-Modul, aktualisiert CodeKit automatisch das Stylesheet.
Objektorientiertes CSS (OOCSS)
Das Kind hat natürlich auch einen Namen: Objektorientiertes CSS. Der Begriff ist deine Entlehnung aus der Programmierer-Sprache (Stichwort Objektorientierte Programmierung).
Übertragen auf CSS heisst das kurz zusammengefasst: Struktur und Oberfläche werden getrennt.
Ein Element #box hat zum Beispiel eine bestimmte Größe und Position im Layout (= Struktur), aber das Element kann verschiedene Farben (= Oberfläche) haben. Also ist es sinnvoll, die Anweisungen für Struktur und Oberfläche in getrennten Anweisungen zu notieren.
#box{
width: 400px;
z-index:1;
}
.grey{
background-color: #ccc;
}
Die Idee von OOCSS geht noch viel weiter. Ich habe ein paar Links zu zum Thema zusammengestellt.
ZUM WEITERLESEN
An Introduction To Object Oriented CSS (OOCSS) (Smashingmagazine)
Object-Oriented CSS: What, How, and Why (Nettuts+)
The 2 Principles Of Object Oriented CSS (vanseodesign)