Single-Line vs. Multi-Line CSS

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Steve Smith von Ordered List hat einen interessanten Artikel darüber, wie er seinen CSS-Code formatiert. Grundsätzlich gibt es zwei Herangehensweisen: Single-Line und Multi-Line, wobei Multi-Line der klassische Ansatz ist.

#wrapper {
    width:800px; 
    margin:0 auto;
}

#header {
    height:100px; 
    position:relative;
}

#feature .post {
    width:490px;
    float:left;
}

Das ist der Stil, den ich verwende und mit dem ich gut zurechtkomme. Steve meint, dass bei großen CSS-Dateien die Selektoren schwieriger schnell zu erfassen sind. Wenn man also alle Selektoren *und* ihre Attribute jeweils auf einer einzelnen Zeile belässt, lässt sich die Datei leichter durchsuchen. So:

#wrapper            {width:800px; margin:0 auto;}
#header             {height:100px; position:relative;}
#feature .post      {width:490px; float:left;}

Er hat einen guten Punkt, ich sehe die Vorteile und es ist reine persönliche Präferenz. Ich denke jedoch, dass ich vorerst beim üblichen Verfahren bleiben werde. Wenn ich wirklich schnell einen Selektor finden muss, benutze ich sowieso immer die Suchfunktion. Ein Kritiker des Stils weist sogar darauf hin, dass verschiedene CSS-Debugging-Tools Fehler nach Zeilennummern anzeigen und es schwieriger sein wird, den Fehler zu finden, wenn man die Single-Line-Methode verwendet. Außerdem, wenn man sich Sorgen um die Durchsuchbarkeit seiner gigantischen CSS-Datei macht, könnte dies ein Symptom von CSS-Bloat sein und man sollte in Betracht ziehen, die Datei aufzuteilen. Ich werde bald einen Artikel darüber schreiben, wie man das machen kann.