Jeder, der das erste Mal mit CSS (Cascading Style Sheets) zu tun hat, oder von diesen liest, bekommt meistens Code im folgenden Stil zu Gesicht.
body {
margin: 0px;
padding: 0px;
font-family: 'Trebuchet MS','Arial',sans-serif;
font-size: 12px;
background-color: #FFFFFF;
background-image: url('../images/background.jpg');
background-repeat: repeat-x;
}
Das ist ein übersichtlicher und klar strukturierter CSS Code, denn jede Zeile bestimmt einen Style.
Aber sobald es nicht nur um das einfache darstellen von Styles geht, die CSS Dateien komplexer werden und die Performance eine ebenso wichtige Rolle spielt, kommt die Überlegung zur Single-Line CSS automatisch.
body { margin: 0px; padding: 0px; font-family: 'Trebuchet MS','Arial',sans-serif; font-size: 12px; background-color: #FFFFFF; background-image: url('../images/background.jpg'); background-repeat: repeat-x; }
Das ist ein unübersichtlicher und unstrukturierter Code. Aber die Übersicht im Ganzen, ist eher gewachsen. Man kann auf einen Blick mehr CSS Elemente sehen und findet so viel schneller die Stelle, an der man etwas editieren will.
Zudem ist es nur eine Zeile Code. Und das macht die CSS Datei wesentlich schlanker und schneller.
Jetzt könnte man mit Argumenten wie Expire Headers kommen, doch das ist eine andere Geschichte! 😉
Was meint ihr dazu?
Ach herrje wie sehr ballert ihr eure css-Files mit Kommentaren, Leerzeichen und Leerlinien dicht?
Liebe Güte xD
AveN
hey meister, um css gut performanter zu machen, aber nicht auf die strukturlichen verhältsnisse zu haben, lass mal die CSS über nen compressor durchrasseln 😉
spart einige KB’s :p (hab ich letztens machen müssen, von 64 KB CSS auf 5 KB :D)
@Stefan
Zum Teil selbst geschrieben. Im Kern setzen wir bei Chameleon aber auf die CSSMin Library. http://code.google.com/p/cssmin/
Danke für die Antworten! 🙂 Davon lebt ein Bloggerherz! 🙂
@ Sven & Jan: Habt ihr die Funktionen im CMS selbst geschrieben, oder gibt es da bereits OpenSource Quellen?
Zum Editieren die Multiline-Variante. Danach baut das CMS oder eine spezielle Anwendung daraus komprimierten CSS-Code.
Für die Entwicklung bevorzuge ich die strukturierte Variante.
Das Minimieren der Dateien für das Produktivsystem kann man automatisieren, z.B. mit minify. So hat man das Beste aus beiden Varianten.
Also zu dem wesentlich schlanker oder schneller Argument: Also ich bin nicht in der Lage den unterschied zwischen 10 und zwölf Millisekunden zu erkennen. Und lass es bei 300.000 gleichzeitigen Zugriffen 200 Millisekunden sein, da tue ich mich immer noch schwer 😉
Zumal Performance heutzutage auf der Straße zu liegen scheint, sieht man am Erfolg von Flash 😉
LG AveN
P.S. Multi!!
Ganz klar Multi-line. Zusätzlich zu deinem beispiel aber mit eingerückten attributen. So sind dann klassen besser erkennbar.
Bin ganz klar für den strukturierten Aufbau, denn zumindest unsere IDE`s können auch in CSS Folding, was es dann wieder übersichtlich macht und bei Auslieferung wird die CSS Datei durch unser CMS Framework komprimiert. Da motzt dann auch das YSlow Plugin nicht mehr.