Coding CSS

Hilfreiche Tipps zur CSS-Stylesheet Optimierung

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!

Beteilige dich an der Diskussion

  1. Ich bevorzuge schon von Anfang an den „Multi Line Code“. Ich finde bei Änderungen einfach viel schneller das, was ich eben suche. Wenn dann noch thematisch kommentiert wird, also eben Header, Content, Sidebar, Footer, Comments, usw. dann ist das die übersichtlichste Lösung, die ich auch wegen ein paar kb nicht ändern würde!

    Danke für die Empfehlung von Clean-CSS. Kannte ich noch nicht und werde ich mir die Tage mal anschauen. ;-)

    Super Artikel, wie immer :P
    grüße Ralf

    1. Hallo Ralf,

      vielen Dank für deinen Kommentar :-) Ja, ich arbeite auch am liebsten mit der übersichtlicheren Variante und nachdem ich den das Stylesheet fertig habe, versuche ich immer mit Hilfe von Clean CSS noch einige Optimierungen. Das Programm ist echt klasse :-)

      Viele Grüße,
      Ellen

  2. Samuel

    Danke für die hilfreichen Tipps! Ich habe mir schon öfters während dem coden überlegt, wie ich das ganze jetzt sinnvoll strukturiere …

    Kleiner Hinweis: Bei 4. muss das doch anders rum, oder?

    1. Ich denke das bei 4. passt so. Single Line Code bedeutet, dass jede Eigenschaft in einer eigenen Zeile steht. ;-)

      Ich bevorzuge auch die thematische Sortierung der Eigenschaften, finde ich einfach übersichtlicher und die alphabetische Anordnung ist mir beim Programmieren einfach zu umständlich *g*
      Übrigens ist auch der HTML-Validator von W3C sehr hilfreich um die Standardkonformität einer Seite sicherzustellen!

      1. Hallo Markus,

        vielen Dank für dein Feedback zum Artikel :-)

        Ich hatte die Bezeichnung Multi Line / Single Line leider im Artikel auch verwechselt, aus dem gleichen Grund wie du beschrieben hattest :-) Mir passiert das gerade bei diesen beiden Bezeichnungen immer wieder, daher tut es mir sehr leid, dass mein Fehler für Verwirrung gesorgt hat :-/

        Ja, ich sortiere die CSS-Eigenschaften auch lieber thematisch, das finde ich auch später sehr viel übersichtlicher. Ich denke vieles ist dabei aber auch Gewohnheitssache :-)

        Der HTML-Validator ist natürlich auch sehr wichtig, als Kontroll-Tool während der Programmierung. Vielen Dank für diese Ergänzung.

        Viele Grüße,
        Ellen

    2. Hallo Samuel,

      vielen Dank für deinen Kommentar und deinen Hinweis zum Punkt 4. Ich habe die Bezeichnung gerade noch einmal korrigiert :-)

      Viele Grüße,
      Ellen

  3. Gnagnagna … Ich fange immer mit den besten Vorsätzen und einer tollen angedachten Struktur an … und nach … und nach … versinke ich dann immer wieder im Chaos ….
    ;-)
    Sabiene

    1. Hallo Sabiene,

      vielen Dank für deinen Kommentar. Ja, bei mir wird es auch immer mal wieder gern ein wenig chaotisch im Code ;-) Daher habe ich mir angewöhnt vorab eine feste Ordnung anzulegen, und dann während der Programmierung immer wieder aufzuräumen und zu optimieren :-)

      Viele Grüße,
      Ellen

    1. Hallo Sven,

      vielen Dank für dein Feedback und deinen Hinweis zur falschen Single Line / Multi Line Bezeichnung. Ich habe den Punkt gerade korrigiert :-)

      Viele Grüße,
      Ellen

  4. @Alle:

    Vielen herzlichen Dank für eure Kommentare und das tolle Feedback zum Artikel :-)

    Zu Punkt 4, Multi Line vs. Single Line:
    Ich hatte die beiden Bezeichnungen verwechselt und habe den Artikel gerade noch einmal korrigiert. Es heißt also Multi Line in der Schreibweise untereinander, und Single Line in der Schreibweise nebeneinander. Entschuldigt mich bitte für diese kleine Verwirrung :-/

    Viele Grüße,
    Ellen

  5. Einen ähnlichen Beitrag zum Thema Organisation und Strukturierung von CSS Dateien hatte ich bereits auch einmal verfasst und die Kommentare hierbei gehen wie so oft auch hier auseinander. Wobei die für mich ideale Herangehensweise die ist, die eine gute Strukurierung mit Kommentaren besitzt und über Multi-Line gut lesbar ist, nach Fertigstellung aber, in welcher Form auch immer (gZip,…), komprimiert wird.

    1. @Webstandard-Blog,

      vielen Dank für deinen Kommentar, deine weiteren Tipps und den Link-Tipp zu deinem Artikel :-)

      Ja das stimmt, die Meinungen bzgl. der CSS Strukturierung gehen oft sehr auseinander. Ich denke es ist wichtig, dass man eine logische auch für andere gut lesbare Struktur schafft und diese dann beibehält :-)

      Viele Grüße,
      Ellen

  6. Danke für den Artikel. Clean CSS kannte ich auch noch nicht. Werde ich bei Gelegenheit mal ausprobieren.
    Wenn an einem Projekt mehrere Entwickler arbeiten und alle an dem Stylesheet rumbasteln und Sachen ergänzen, herrscht mit der Zeit das reine Chaos. Trotz anfänglicher klarer Struktur. Jeder tickt eben etwas anders… :-)

    1. Hallo Lemi,

      vielen Dank für dein Feedback zum Artikel. Freut mich, dass dir der CleanCSS-Tipp weiterhilft :-)

      Oh je, dass kann ich mir vorstellen, dass es bei einer gemeinsamen Arbeit an einem Stylesheet leicht Chaos entstehen kann. Am besten bespricht man da wohl vorab eine Struktur, diese kann man vielleicht sogar in einem Kommentar im CSS mitgeben.

      Viele Grüße
      Ellen

    1. Hallo Martin,

      vielen Dank für dein Feedback zum Artikel :-) Ja ja, ich gebe zu, diese Bezeichnung ist wohl ein wenig doppelt gemoppelt, aber dafür deutlich ;-) Ich hoffe allerdings, dass deine Prophezeiung nicht zutrifft, ich mag Babykätzchen nämlich sehr :-)

      Viele Grüße,
      Ellen

  7. Peter

    CSS-Eigenschaften alphabetisch zu sortieren ist mal eine nette Idee.

    Normal sortiere ich thematisch, aber gerade bei weniger häufig genutzten Eigenschaften kommt dann immer wieder die Frage ‚Gehörte das jetzt hierhin, oder dahin, oder dorthin, oder wo?‘. Alphabetisch sortiert wäre das sofort klar.

    Mal drüber nachdenken…

    1. Hallo Peter,

      vielen Dank für deinen Kommentar, es freut mich, dass dir die Tipps und Vorschläge für die CSS-Datei gefallen :-)

      Ja, für die alphabetische Sortierung der CSS-Eigenschaften spricht auf jeden Fall, dass es dann keine offenen Fragen mehr gibt. Eventuell kann dies auch ein Vorteil, wenn man als Team an einem Layout arbeitet :-)

      Viele Grüße,
      Ellen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.