Kontroverser Titel. Ich weiss. Ohne mich auf anderen Blogs und Foren umgesehen zu haben, und somit auf die Gefahr hin, dass ich hier etwas allgemein bekanntes schreibe, möchte ich in diesem Artikel einige Argumente liefern, welche die Vorteile einer Einzeiligen CSS-Notation zeigen. Jeder hat seine eigenen Präferenzen wie er Code schreibt. Mit der Zeit kristallisiert sich jedoch oft eine Art Standard heraus. Ein geschriebenes oder ungeschriebenes Gesetz, welches bestimmt, wie Code einer Art auszusehen hat. Ich denke, es ist an der Zeit, dass sich als Standard für CSS die einzeilige Notation durchsetzt. Hier ist warum:
Zu Beginn mag das Lesen von einzeiligem CSS-Code gewöhnungsbedürftig sein, doch hat man sich erstmal damit abgefunden, möchte man die zahlreichen Vorteile nicht mehr missen. Dazu gilt es zu erwähnen, dass ich früher auch ein Verfechter der „jede Eigenschaft auf eine Zeile“ Methode war. Ich kenne also die mehrzeilige Variante sehr wohl, doch mit der Zeit und zunehmenden und grösser werdenden CSS-Projekten lernte ich die Vorteile der einzeiligen Variante kennen und schätzen.
Zuerst möchte ich jedoch klären was ich unter „einzeiliger CSS Notation“ verstehe. Ich meine nicht, dass jeder CSS-Selektor auf einer Zeile geschrieben wird mit unmittelbar folgender Deklaration: Dies ist sehr unübersichtlich da sich Selektoren und zugehörige Deklarationen visuell vermischen und nicht mehr leicht voneinander zu unterscheiden sind:
Man muss die Selektoren von ihrer Eigenschaften trennen, damit die Vorteile einer einzeiligen Notation zum tragen kommen. Dabei werden alle Deklarationen soweit eingerück, bis sie die Länge des längsten Selektors überschreiten:
Für die folgenden Tests habe ich eine CSS-Datei mittlerer Grösse aus einem unserer aktuellen Projekte verwendet.
Der erste Vorteil ist trivial: weniger Code. Das von mir verwendete CSS File hatte 1421 Zeichen reiner CSS-Code (inklusive Kommentare). Das mehrzeilige CSS benötigte 1919 Zeichen, wovon fast 26% der Zeichen (498 Zeichen) nur der Darstellung dienten, wohingegen das einzeilige CSS mit 1579 Zeichen, lediglich 10% (158 Zeichen) für eine sauberen Darstellung aufwendete. Ausserdem wird durch die erhöhte Übersichtlichkeit (dazu komme ich im nächsten Punkt) die Gefahr verringert wird, dass Code doppelt oder dreifach geschrieben wird, was ebenfalls Zeichen spart.
Mehrzeiliger Code: Nur 31% sichtbar
Das oft aufgeführte Argument, mehrzeiliges CSS sei übersichtlicher mag zwar subjektiv stimmen, tatsächlich ist die Übersicht bei der einzeiligen Notation jedoch massiv grösser – hat man sich erstmal an die Lesart gewöhnt. Für meinen Test bin ich von einem 1024 mal 768 Pixel Monitor ausgegangen – bei den heute oft verwendeten Breitbildmonitoren mit hoher Auflösung dürfte das Resultat sogar noch stärker zugunsten der einzeilige Methode ausfallen. Bei diesen Voraussetzungen sind in der einzeiligen Version 71% des gesamten CSS sichtbar (1014 Zeichen), wohingegen beim mehrzeiligen CSS lediglich 31% des CSS-Codes sichtbar sind (437 Zeichen). Damit ist die Wahrscheinlichkeit, dass man beeinflussenden Code eines anderen Selektors sieht in der einzeiligen Variante massiv erhöht, wohingegen man bei der mehrzeiligen Methode womöglich Einflüsse nicht sieht, weil sich diese ausserhalb des sichtbaren Bereichs befinden.
Einzeiliger Code: 71% sichtbar
Um wieder einmal mit einem Auto-Vergleich vorzufahren: Stellen Sie sich vor, ein Autofahrer würde sich wegen der grossen Fenster seines neuen Kleinwagens beschweren.
Durch das erweiterte Sichtfeld sehe er mehr von der Umwelt, und muss folglich auch eine grössere Fläche nach möglichen Gefahren visuell absuchen. Das sei anstrengend. Er fordert daher, dass wie beim alten Modell wieder kleinere Fenster verbaut würden. Durch das Verkleinern der Fenster, womit nun nur noch einen Ausschnitt der Umgebung sichtbar ist, verschwinden aber die Gefahren nicht, der Fahrer sieht sie nur nicht mehr und wägt sich damit in einer trügerischen Sicherheit. Jeder erkennt, dass ein Ruf nach kleinen Fenstern beim Auto völlig sinnbefreit ist – genauso verhält es sich beim CSS mit mehrzeiligem Code.
Das weitläufige Vorurteil, viele Zeilen würde rechts aus dem sichtbaren Bereich verschwinden ist unbegründet. Die meisten Selektoren weisen nicht mehr als fünf Eigenschaften auf. Diese passen problemlos auf eine Zeile, ohne aus dem sichtbaren Bereich zu entfliehen. In dem Test mit einer Auflösung von 1024 mal 768 Pixel gerieten lediglich 20% der Zeilen zum Teil aus dem sichtbaren Bereich. Bei meiner Standardauflösung von 1680 mal 1050 Pixel waren lediglich 10% der Linien rechts leicht angeschnitten. Ausserdem war die Datei in ihrer vollen Länge sichtbar. Hinzu kommt noch, dass bei geschickter Anordnung der CSS-Eigenschaften tendenziell nur unwichtige Eigenschaften aus dem sichtbaren Bereich verschwinden. Ich sortiere die Eigenschaften in etwa in folgender Reihenfolge:
- Display-Eigenschaften, Position
- Dimensionen (width, height, margin, padding)
- Overflow, z-Index…
- Objekt Typische Eigenschaften (list-style-type…), Font-Sizes
- Farben und Ränder…
So sind meist lediglich unwesentliche Eigenschaften wie Farben oder Ränder nicht sichtbar.
Ein weiterer Vorteile der Methode ist, dass es sich einfacher gestaltet, einzeilige Files automatisiert auf mehrzeiligen Code umzuwandeln als umgekehrt.
Fazit:
Obwohl die einzeilige Methode zu Beginn durch den vielen sichtbaren Code unordentlicher wirkt, ist die Übersicht jedoch massiv erhöht da man viel mehr Selektoren gleichzeitig vergleichen kann und sieht, welche Einflüsse und Abhängigkeiten sie voneinander haben. Mit der einzeiligen Methode, spart man damit nicht nur Zeichen, auch die Fehleranfälligkeit des Codes wird dadurch verbessert. Als kleiner Nebeneffekt wird das schreiben des Codes erleichtert, da mann nicht ständig Umbrüche und Einrückungen vornehmen muss.
