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.
Ich benutze beide Methoden. Meistens benutze ich die geräumige, aber bei verschiedenen Dingen (z. B. Link-Stile) bevorzuge ich die kurze. :)
Ich persönlich finde Beispiel eins am besten und am leichtesten zu überfliegen, aber Beispiel zwei ist kleiner, da es nicht so viele Leerzeichen, Zeilenumbrüche und Tabs verwendet.
Benutzen Sie Multi-Line während der Entwicklung und verdichten Sie dann den Code für die Produktion. Sie werden überrascht sein, wie sehr das Entfernen der zusätzlichen Leerzeichen die Dateigröße reduzieren kann.
@John Schires: Die Dateigröße ist ein guter Punkt. Wenn Sie auf die schnellstmögliche Ladezeit abzielen, kann die Optimierung Ihres CSS dabei helfen.