Beim Schreiben eines CSS-Stylesheets ist es sehr hilfreich eine genaue Struktur und Ordnung für den CSS-Code anzulegen. Auf diese Weise kommst du selbst besser bei der Programmierung zurecht, und auch bei späteren Änderungen können CSS-Eigenschaften immer wieder schnell gefunden werden. Jeder Webdesigner hat seine eigenen Techniken und Vorlieben beim Schreiben von CSS-Code. Als Überblick und zur besseren Orientierung habe ich einige nützliche Tipps zur Optimierung von CSS-Stylesheets zusammen gestellt.

1. Die Grundstruktur erstellen

Da es keine ganz festen Regeln bei der Strukturierung von CSS-Code gibt ist es wichtig, dass du dir vor Beginn der Programmierung überlegst, wie du dein Stylesheet anlegen möchtest. Wenn es dir bei der Übersicht weiterhilft, kannst du sogar ein kleines Inhalts-Verzeichnis für dein Stylesheet schreiben.

CSS Optimierung

Es ist sinnvoll in deinem Stylesheet-Aufbau den Webseitenaufbau von oben nach unten durchzugehen. Also legst du als erstes alle Styles des Headers, dann des Contents, der Sidebar und schließlich des Footers an.

Am besten du dokumentierst dein Stylesheet immer mit Überschriften der gleichen Hierarchie mit. Ich nutze dazu für die Haupt-Überschriften folgenden Überschriften-Stil:

[php]
/* Main Headline
——————————————— */
[/php]

Für Unter-Überschriften innerhalb der Hauptabschnitte kannst du zusätzliche folgenden Stil nutzen:

[php]
/* — Sub Headline — */
[/php]

Eine übliche Technik ist es auch, einen Absatz mit allgemeinen Styles zu erstellen, die den Aufbau deiner Grundelemente und eventuell die Grund-Styles deiner Schriften beinhalten.

Planst du relativ viele Styles für die unterschiedlichen Überschriften (h1 bis h6) und typografischen Hauptelemente (p, em, small, strong) anzulegen, kannst du auch darüber nachdenken, alle typografischen Elemente unter dem Punkt »Typography« und alle Überschriften unter »Headings« vor den übrigen Styles (Header, Navi, Content…) in deinem Stylesheet voranzustellen. Darunter könntest du noch grundlegende Styles für Links und Listen-Elemente definieren.

CSS Optimierung
Styles der Überschriften können unter “Headings” zusammen gefasst werden.

Am besten überlegst du dir, welche Struktur für dein Layout am sinnvollsten ist, und mit welcher Ordnung du selbst am besten zurecht kommst. Ein sehr hilfreicher Tipp zur Übung ist es, die Stylesheet-Hierarchie von bekannten Webdesigns oder Themes anzuschauen, und diese genau zu studieren. So lernst du am schnellsten, welche Möglichkeiten es bei der Strukturierung eines Stylesheets gibt.

Natürlich solltest du immer daran denken, dass deine Programmierung eventuell später von anderen Webdesignern oder Entwicklern weiterbearbeitet werden soll. Daher ist eine eindeutige und logische Strukturierung und Beschriftung besonders wichtig.

2. Einzelne CSS-Eigenschaften sortieren

Nachdem du die Grundstruktur deines Stylesheets erstellt hast, kannst dich an die Hierarchie der einzelnen CSS-Eigenschaften (width, margin, padding, color etc.) machen. Schließlich willst du später nicht lange suchen müssen, wenn du nur schnell einen padding-Wert anpassen möchtest. Auch hier gibt es wieder verschiedene Möglichkeiten.

Nach Themen sortiert

Entweder kannst du dir eine logische Strukturierung nach Themen zurecht legen. Du kannst also beispielsweise zuerst die Maße wie width, height, margin und padding auflisten. Dann könntest du floats definieren, und darunter alle Eigenschaften zur Typografie definieren (also font, color, line-height, font-weight, font-style etc.).

CSS Optimierung

Alphabetisch sortiert

Manche Entwickler sortieren die CSS-Eigenschaften lieber alphabetisch.

CSS Optimierung

Ich persönlich empfinde die alphabetische Sortierung als etwas weniger übersichtlich. Welche Methode du bevorzugst, kommt aber immer auf deine eigenen Gewohnheiten an.

3. Das Stylesheet kommentieren

Wie schon erwähnt ist es sehr wichtig das CSS-Stylesheet einheitlich und übersichtlich zu beschriften und zu kommentieren. Wichtig ist, dass du dabei nicht vergisst, den kommentierten Bereich mit /* Text hier */ zu markieren.

CSS Optimierung

4. Single Line oder Multi Line für bessere Lesbarkeit

Auch die Entscheidung, ob du deine CSS-Eigenschaften untereinander, also in Multi Lines oder alle Eigenschaften eines Klasse oder ID nebeneinander (Single Line) schreibst, bleibt ganz deinem eigenen Geschmack überlassen.

CSS Optimierung

Den Code untereinander zu schreiben hilft meiner Ansicht nach bei der Übersichtlichkeit, die platzsparendere Variante ist aber sicherlich der Single Line-Code. Diese hat auch eine etwas geringere Dateigröße, da im CSS jedes einzelnes Zeichen (auch Leerzeichen) gezählt wird.

5. @import für Extra-Styles

Benötigst du Extra-Styles (z.B. für den Internet Explorer) kannst du diese in ein Extra-Stylesheet schreiben und es mit der @import-Eigenschaft ganz oben in deinem Haupt-Stylesheet aufrufen.

[php]
@import "css/reset.css";
@import "css/ie.css";
[/php]

Aus diese Weise kannst du dein Stylesheet ordentlicher halten, was besonders bei einem sehr langen Stylesheet hilfreich ist.

6. Komprimierung mit Clean CSS

Wenn du alle CSS-Styles fertig geschrieben hast und die Programmierung in verschiedenen Browsern getestet ist, kannst du dein Stylesheet noch mit Hilfe praktischer Online CSS-Optimierer, wie dem Clean CSS optimieren.

CSS Optimierung

Mit Hilfe des Tools kannst du die Dateigröße deines Stylesheets meist um etliche Prozent verringern. Am besten du sicherst dir zuerst eine Kopie deines fertigen Stylesheets, und probierst dann verschiedene Einstellungsmöglichkeiten von Clean CSS aus.

7. CSS-Code Validierung nutzen

Vor allem als Anhaltspunkt bei der Erstellung von CSS-Styles für deine Webseite ist der CSS-Validierer von w3.org sehr nützlich. Du kannst dein Stylesheet entweder per URL aufrufen, oder die CSS-Datei von deinem Computer hochladen.

CSS Optimierung

So kannst du mögliche Fehler in deinem Stylesheet schnell entdecken, korrigieren und das Stylesheet dann noch einmal mit dem CSS Validatation Service testen. Meiner Ansicht nach sollte die Validierung aber immer nur als Anhaltspunkt dienen, da beispielsweise einige neue CSS3-Eigenschaften vom Tool als Fehler markiert werden. Wenn du dir sicher bist, dass deine Styles korrekt geschrieben sind, brauchen dich diese Warnungen bzw. Fehler also nicht allzu sehr beunruhigen.

Ich hoffe diese Tipp können dir bei der Optimierung deines CSS-Codes behilflich sein. Über deine Meinung zu den beschriebenen Techniken und weitere Tipps zu Optimierungsmöglichkeiten von CSS-Stylesheets würde ich mich sehr freuen!