Kommentare 2

CSS Code optimieren – hilfreiche Tipps und Tools

Es gibt viele Möglichkeiten CSS Code zu formatieren, 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 übersichtliches Style Sheet natürlich besonders gefragt. Ich habe ein paar Tipps und Tools zusammengestellt, die bei der Optimierung von CSS Code helfen können.

1. MultiLine oder SingleLine Code

CSS Code optimieren

Die CSS Styles in mehrere Zeilen anzuordnen, hat den Vorteil, dass man einzelne 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 hintereinander schreibt, wird der gesamte Code sehr viel kürzer. Um eine einzelnen Style zu finden, muss man aber schon genau hin gucken, und den Code horizontal scrollen.

Ich denke, welche Formatierung man für sein CSS Code am liebsten verwendet, ist wohl Gewohnheit. Wenn du mit mehreren Programmierern an einer Webseite arbeitest, solltet ihr am besten vor Projektbeginn besprechen, welche Formatierung euch zusagt.
Ein toller Artikel, der im Detail auf alle Optionen bei der CSS Formatierung eingeht, findest du bei CSS-Tricks: »Different Ways to Format CSS«.

2. ein Inhaltsverzeichnis anlegen

CSS Code optimieren

Bei einem längeren Style Sheet kann ein Inhaltsverzeichnis mit Nummerierung ebenfalls sehr hilfreich sein. Ich habe beispielsweise dieses Inhaltsverzeichnis bei einem WordPress-Theme gesehen, und fand es sehr hilfreich.

3. CSS Code kommentieren

CSS Code optimieren

Sehr sinnvoll finde ich auch das kommentieren des Codes. Ich mag neben, der inhaltlichen Strukturierung des Codes, auch besonders eine grafische Struktur. Praktisch finde ich z.B. Trennlinien der verschiedenen Elemente zu setzen, verschiedene Unterteilungen anzulegen. Eine vernünftige Beschriftung der Elemente hilft auch, sich später wieder schnell im Code zurechtzufinden.

4. CSS optimieren und komprimieren

CSS Code optimieren

Neben diesen Tipps, gibt es außerdem noch sehr hilfreiche Tools, um deinen CSS Code zu optimieren und vor allem zu komprimieren.

Meiner Lieblings-Tools zum komprimieren von CSS Code sind Clean CSS mit etlichen Optionen und auf deutsch, und der CSS Compressor.

5. Unnötige Selektoren entfernen

CSS Code optimieren

Mit dem hilfreichen Firefox Addon Dust-Me Selectors kannst du nach allen überflüssigen CSS Selektoren in deinem Style Sheet suchen. So kannst du vermeiden, dass dein Code unnötig lang wird.

Nach getaner Arbeit solltest du deinen Code noch bei W3C validieren, um sicher zu gehen, dass sich keine Fehler (z.B. Tippfehler) eingeschlichen haben.

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

2 Kommentare

  1. Liebe Ellen, vielen Dank für diesen hilfreichen Artikel. Das hast du wirklich super zusammengefasst. Ob MultiLine oder SingleLine habe ich mich in letzter Zeit auch öfters gefragt. Ich mag SingleLine irgendwie lieber. Habe mir aber angewöhnt, die einzelnen Styles immer in die gleiche Reihenfolge zu setzen. So muss ich trotzdem nicht lange suchen :)
    Fürs Aufräumen von CSS-Code habe ich bis jetzt CSS SuperScrub verwendet. Werde Clean CSS aber sicher mal ausprobieren. Sehr viele Optionen, das ist super :)

Schreibe eine Antwort