Es gibt viele Möglichkeiten CSS Code zu for­ma­tieren, und jeder Webdesigner hat da so seine eigenen Vorlieben. Wichtig ist vor allem, dass man sich auch zu einem spä­teren Zeitpunkt immer wieder schnell in seinem Code zurecht findet. Schließlich will man ja nicht bei jeder Style-Änderung ewig in seinem eigenen Code suchen ;-). Und wenn man in einem Team arbeitet, ist ein über­sicht­li­ches Style Sheet natür­lich beson­ders gefragt. Ich habe ein paar Tipps und Tools zusam­men­ge­stellt, die bei der Optimierung von CSS Code helfen können.

1. MultiLine oder SingleLine Code

Die CSS Styles in meh­rere Zeilen anzu­ordnen, hat den Vorteil, dass man ein­zelne Styles schneller findet. Leider wird der gesamte Code bei dieser Schreibweise aber auch sehr viel länger.

Wenn man seine Styles in einer langen Zeile hin­ter­ein­ander schreibt, wird der gesamte Code sehr viel kürzer. Um eine ein­zelnen Style zu finden, muss man aber schon genau hin gucken, und den Code hori­zontal scrollen.

Ich denke, welche Formatierung man für sein CSS Code am liebsten ver­wendet, ist wohl Gewohnheit. Wenn du mit meh­reren Programmierern an einer Webseite arbei­test, solltet ihr am besten vor Projektbeginn bespre­chen, welche Formatierung euch zusagt.
Ein toller Artikel, der im Detail auf alle Optionen bei der CSS Formatierung ein­geht, fin­dest du bei CSS-Tricks: »Different Ways to Format CSS«.

2. ein Inhaltsverzeichnis anlegen

Bei einem län­geren Style Sheet kann ein Inhaltsverzeichnis mit Nummerierung eben­falls sehr hilf­reich sein. Ich habe bei­spiels­weise dieses Inhaltsverzeichnis bei einem WordPress-Theme gesehen, und fand es sehr hilfreich.

3. CSS Code kommentieren

Sehr sinn­voll finde ich auch das kom­men­tieren des Codes. Ich mag neben, der inhalt­li­chen Strukturierung des Codes, auch beson­ders eine gra­fi­sche Struktur. Praktisch finde ich z.B. Trennlinien der ver­schie­denen Elemente zu setzen, ver­schie­dene Unterteilungen anzu­legen. Eine ver­nünf­tige Beschriftung der Elemente hilft auch, sich später wieder schnell im Code zurechtzufinden.

4. CSS opti­mieren und komprimieren

Neben diesen Tipps, gibt es außerdem noch sehr hilf­reiche Tools, um deinen CSS Code zu opti­mieren und vor allem zu komprimieren.

Meiner Lieblings-Tools zum kom­pri­mieren von CSS Code sind Clean CSS mit etli­chen Optionen und auf deutsch, und der CSS Compressor.

5. Unnötige Selektoren entfernen

Mit dem hilf­rei­chen Firefox Addon Dust-Me Selectors kannst du nach allen über­flüs­sigen CSS Selektoren in deinem Style Sheet suchen. So kannst du ver­meiden, dass dein Code unnötig lang wird.

Nach getaner Arbeit soll­test du deinen Code noch bei W3C vali­dieren, um sicher zu gehen, dass sich keine Fehler (z.B. Tippfehler) ein­ge­schli­chen haben.

Hast du wei­tere Tipps, wie man seinen CSS Code opti­mieren kann? Was sind deine Empfehlungen und Lieblingsmethoden? Schreib mir doch einen Kommentar, ich freue mich schon über wei­tere Tipps!