Cascading Style Sheet – CSS optimieren

Cascading Style Sheet – CSS optimieren

CSS optimieren
CSS optimieren

Ein Website lässt sich grob vereinfacht als eine Sammlung von Text und Medien beschreiben, die auf eine adäquate Weise vom Browser dargestellt werden. Den Text und die Medien kann man auch Inhalt nennen, und die Art der Darstellung Form. Für eine effektive Weiterentwicklung einer Website macht es Sinn, Form und Inhalt zu trennen. Auf diese Weise lassen sich ohne Probleme neue Inhalte hinzufügen. Auf der anderen Seite kann man auch Änderungen am Design vornehmen, ohne alle Seiten überarbeiten zu müssen. Aus diesem Grund wird heutzutage die Gestaltung einer Website über Cascading Style Sheets (kurz CSS) definiert. Aber wie kann man diese CSS-Datei(en) optimieren?

Es gibt zwei Kriterien, die für ein „gutes“ CSS entscheidend sind: die Dateigröße und die Übersichtlichkeit. Meine CSS-Tipps stehen vermutlich in keinem Handbuch, und werden vermutlich (zum Teil) von den Fachlauten zerrissen werden. Ich schreib sie trotzdem auf, weil sie einfach nach meiner Erfahrung sinnvoll sind…

Die CSS-Washing-machine

Mein erster CSS-Optimierungstipp ist gar keiner, sondern eine Bitte an alle pfiffigen Programmierer. Was wirklich fehlt ist eine CSS-washing-machine. Also ein Programm, mit dem man überflüssigen Code aufspüren kann. Eine Software, die alle CSS-Definitionen abscannt – und zwar nicht auf einer Seite (wie es eine Firefox-Extension kann), sondern bezogen auf die gesamte Site. Denn viele styles kommen ja nur auf bestimmten Seiten vor. So was fehlt mir, ich habe noch keine gute und sichere Lösung gefunden. Vielleicht schreibt ja jemand beim Webmasterfriday darüber und gibt mir den entscheidenden Tipp.

Eindeutige Bezeichner zum besseren Aufräumen

Viel Arbeit mit Aufräumen
Viel Arbeit mit Aufräumen

Ein wesentliches Problem bei CSS-Dateien ist sicherlich die Dateigröße. Nichts ist schlimmer als ein über die Jahre vollgerumpeltes CSS. Aber oft ist es so. Auch ich ergänze laufend hier und da Kleinigkeiten. Aber zum richtigen Aufräumen komme ich selten. Eine effektive „CSS-wasching-machine“ (wie oben beschrieben) kenne ich leider nicht. Ich räume immer von Hand auf, mit der Suchfunktion. Und das nervt. Aber muss aben ab und zu mal sein. Das funktioniert jedoch nur, wenn man CSS-Bezeichner hat, die wirklich eindeutig sind. Denn dann kann man nach diesen Namen sidewide suchen (btw: ich benutze seit Urzeiten Dreamweaver, mit dem ich auch ganz zufrieden bin). Wenn der Name nur noch in der CSS-Datei gefunden wird, kann man ihn getrost löschen. Aber wie gesagt: es geht nur, wenn der Bezeichner eindeutig ist. Es macht daher Sinn, ein Kürzel voranzustellen, also zum Beispiel: „.tsb_search“ – (tsb für tagseoblog).

Leerzeichen löschen?

Leerzeichen (space) löschen?
Leerzeichen (space) löschen?

Wenn man eine CSS-Datei durch den CSS-Valitator des W3C jagt, wird am Ende des Checks die CSS-Datei noch mal aufgelistet. Wie man sieht, sind dort irre viele Leerzeichen eingefügt, die überflüssig sind. Ein Leerzeichen ist ein Zeichen wie jedes andere, es braucht auch Speicherplatz. Bei längeren Dateien läppert sich darüber ganz schön was zusammen. Hierfür gibt es viele Programme, mit denen sich ein CSS daraufhin optimieren lässt. Ganz gut und sauber finde ich CSS-Tidy. Damit wird der CSS-Code gesäubert. Neben den überflüssige Leerzeichen werden auch andere Details wie z.B. überflüssige Padding- und Margin- Nullen gesäubert. Das bringt meistens immerhin ein paar Prozent weniger Dateigröße. Für Leute, die ein WordPress-Theme benutzen und ihre CSS-Datei nie angefasst haben, gibt es eine spezielles WordPress-CSS-Optimierungstool: Wp CSS (Habe es nicht ausprobiert, bitte bei negativen Erfahrungen kurz kommentieren).

In dem Zusammenhang geht mir der CSS-Compressor dann doch etwas zu weit. Er löscht nämlich nicht nur überflüssige Leerzeichen, sondern auch die Zeilenumbrüche. Das geht zuweit! Womit ich beim zweiten Punkt wäre:

CSS Formatierung

Eine übliche, anerkannte und saubere CSS-Formatierung sieht so aus – für jede Definition eine neue Zeile.

body  {
   margin:0;
   padding:0;
   background:#fff;
   color:#433;
   font-family:Verdana, Arial, Helvetica, sans-serif;
}
h1 {
   padding:0;
   margin:0;
   text-indent:-9999px;
   font-size:1em;
}
...

Auch wenn es so richtig ist – ich arbeite anders. Ich hasse es einfach, während der Arbeit ständig hoch und runter zu rollen. Ich habe gerne möglichst viel Code zur gleichen Zeit im Blick. Ich formatiere meine CSS-Dateien daher so:

body  { margin:0; padding:0; color:#433; background:#fff; }
h1    { margin:0; padding:0; color:#093; font-size:1em; }
...

Das erklärt sich vielleicht auch aus meinem Arbeitsplatz: ich habe zwei Screens mit 1600 x 1200 Pixeln Auflösung. Auf einem ist immer nur der Quelltext, auf dem anderen die Vorschauseite. Mit „meiner“ Formatierung passen meist 50% oder mehr auf den sichtbaren Screen. Ich bin dadurch wesentlich schneller beim Arbeiten. Wenn ich in einem laufenden Projekt eine CSS-Datei jemandem anderen übergeben muss, schicke ich die Datei schnell durch CSS-Tidy und ab damit. Wenn ich eine normal fromatierte CSS-Datei bekomme, dann ebenfalls schnell durch CSS-Tidy und anschließend die Umbrüche durch ein Leerzeichen ersetzen.

Redundanzen vermeiden

Redundanz ist die Wiederholung einer bereits gesetzten Information. Bei mir tritt der Fall am häufigsten bei Farben auf. Beispiel: die Fareb blau soll in drei verschiedenen Layer als Hintergrundfarbe erscheinen. Dann kann man das so schreiben:

.tsb_layer_1 { ..., margin:0; padding:0; background:#ff0; }
.tsb_layer_2 { ..., margin:0; padding:0; background:#ff0; }
.tsb_layer_3 { ..., margin:0; padding:0; background:#ff0; }

oder man schreibt die Layer-definitionen ohne Farbwert. Stattdessen legt man für die Farbe eine eigene Klasse an.

.tsb_color_blue { background:#ff0; }

In den entsprechenden Tags setzt man dann einfach zwei Klassen ein („multiple CSS-Klassen„):

<div class="tsb_layer_1 tsb_color_blue">...

Durch dieses Prinzip kann man, je nach dem, auch eine ganze Menge Code sparen.

Wie wichtig ist die Backgroundcolor?

An diesem Punkt bin ich mir unsicher. Einerseit gibt der Validator bei jeder Klasse oder ID, bei der eine Textfarbe gesetzt ist, eine Warung aus, wenn die Hintergrundfarbe nicht gesetzt ist. Es wäre also sauberer, immer auch den Hintergrund zu definieren. Aus besagten Dateigrößen-Überlegungen mache ich das aber nicht. Ich bemühe mich stets, nur die relevanten Formatierungen zu setzen. Was meint ihr?

CSS-Design – von der Pike auf lernen

CSS Design Buch Cover
CSS Design Buch Cover

Dieser Artikel war mal ungefähr zehn mal so lang. Ich habe dusseligerweise eine Art „Einführung in die CSS-Technologie“ begonnen und bin dann von Hölzchen aufs Stöckchen gefallen (oder wie man so sagt). Ich hab das alles wieder gelöscht. Denn es war zuviel und fehl am Platz. Ich möchte stattdessen auf eine sehr gute Einführung in das Thema hinweisen.  Nein, ich möchte sie sogar empfehlen:

CSS-Design – Das Buch – von Heiko Stiegert (Webstandard-Blog) – Galileo-Design Verlag

Es ist nicht nur für Einsteiger gut geeignet, sich einen Überblick zum Thema CSS zu verschaffen, sondern auch für Fortgeschrittene eine gute Möglichkeit, das Bekannte zu überprüfen und eingeschliffene Unsauberkeiten zu optimieren. Daneben werden viele konkrete Beispiele erläutert, wie man seine Seiten schnell und effektive attraktiver und damit erfolgreichen machen kann. Naja, ihr könnt das alles direkt bei ihm nachlesen:

Fazit: CSS-Optimieren

Die von mir genannten Punkte beziehen sich alle nur auf den Code.

  • CSS-washing-machine (fehlt!)
  • Eindeutige Bezeichner
  • Leerzeichen löschen
  • Redundanzen vermeiden (multiple CSS-Klassen)
  • Backgroundcolor weglassen (?)

Unter dem Stichwort CSS-optimieren kann man natürlich auch „Design optimieren“ verstehen. Das ist mir jedoch etwas zu weit gefasst. Das adäquate Design einer Website hängt natürlich immer auch vom jeweiligen Inhalt ab. Das kann man zwar mittels CSS codieren – aber gestalten muss letzlich immer ein Auge (bzw. zwei) …

Externe Links zum Thema:

Cascading Style Sheets - CSS optimieren
Cascading Style Sheets - CSS optimieren

Weiterführende Artikel

10 Gedanken zu „Cascading Style Sheet – CSS optimieren

  1. Wow, das ist nicht nur ein ultra langer Artikel, nein auch ein sehr GUTER! Schön, dass Du ebenfalls Farbcodes auf 3 Stellen abkürzt, wenn es möglich ist. Ich sehe so oft ein #000000 .. Das lohnt sich, hier immer schön abzukürzen.

    Alle Definitionen in eine Zeile zu ziehen, wie Du es im Punkt „CSS Formatierung“ zeigst, mache ich nur, wenn es wenige Definitionen sind. Ansonsten strukturiere ich alles untereinander, aber passende Definitionen in jeweils einer Zeile hintereinander.

    .text {
    margin:5px 10px 5px 20px; padding:2px;
    width: height: float:
    text-align: font: text-decoration:
    background: border:
    }

    Mir fällt es so leichter, später damit zu arbeiten. Zum Beispiel weiß ich dann, dass alle Textformatierungen in der Mitte stehen und die wichtigen Positionsangaben, Abstände usw. ganz oben in den ersten Zeilen.

    Das CSS Design Buch habe ich übrigens gleich nach Erscheinen durchgearbeitet, aber leider ein paar Fehler entdeckt. Deshalb haben ein paar Kapitel nicht funktioniert. Ich empfehle es trotzdem immer, denn es arbeitet sich ansonsten hervorragend damit.

    Die meisten CSS Schreiberlinge kennen den CSS Zengarden schon, aber für alle die ihn noch nicht kennen.. Entdecke die Power of ZEN – ne, CSS! http://csszengarden.com/

  2. Wirklich ein schöner Beitrag, wie ich ihn mir auch von Dir erwartet hatte *lol*. Daher mein etwas anderer Ansatz.
    Ich habe noch diesen Link hier entdeckt über ein CSS-Optimierungs Script: http://www.seo24.at/css-optimieren/
    Ist zwar noch keine CSS-Washing-Machine aber vielleicht für den ein oder anderen ein Ansatz eine Unterstützung, um zu lernen wie der eigene Code kürzer werden kann.

  3. Hier vielleicht auch noch ein paar Tipps:
    * CSS resets verwenden, z.B. http://developer.yahoo.com/yui/reset/
    * Zur Übersichtlichkeit den Code einrücken
    * Auf Deklarationen wie „.tsb_color_blue“ würde ich verzichten. Was ist wenn das blue nicht mehr blue sein soll? Ist aber wohl Geschmackssache.
    * Mit !important kann man Inline-Styles überschreiben.

    Mehr fällt mir jetzt auf die Schnelle nicht ein :-)

  4. Also ich bleibe bei der traditionellen Schreibweise. ist einfach am Übersichtlichsten! Da finde ich es besser, die Stylsheet-Datei nach Fertigstellung mit dem css_compressor aufs brutalste zu zerkleinern. Was bei CSS-Dateien, an denen permanent gearbeitet wird, natürlich Problematisch ist. Generell würde mich aber mal interessieren, wie groß der Vorteil ist, wenn eine CSS von z.B. 4.426 B auf 3.064 B (30.77%) verkleinert wurde. Für wen ist das spürbar? Für jeden DSL-Surfer dürfte das so gut wie unbedeutend sein!

  5. @Gab: Naja, das läppert sich. Es ist ja nicht nur die Stylesheet-Datei, die man so verkleinert, sondern auch die HTML-Seite selber, die durch sauberes CSS wesentlich kleiner wird. Viele hängen ja auch mehr als ein Stylesheet an, und dann kommt man am Ende schon zu einer spürbaren Gesamt-Verringerung.
    Aber du hast recht: Für den Benutzer ist das in aller Regel egal. Nur die Suchmaschinen, die freuen sich, wenn es schneller geht. Ob und inwieweit das einen Rankingvorteil bringt, ist allerdings umstritten.
    Gruß, Martin

  6. endlich jemand der die css genauso formatiert wie ich :)
    ich dachte schon die stimmen die mir ständig sagen das wäre unübersichtlich uns schei** (wirklich war) haben recht ^^

    ps.: aber sehr schöner artikel
    bin über yeebase zu dir gekommen und werde dich gleich in meine linkliste für den morgendlichen kaffee aufnehmen ;)

  7. Also ich arbeite auch mit einzeiligen CSS Anweisungen. Muß aber sagen, dass viele Entwickler an die Dreamweaver Ausgabe gewohnt sind wie
    .classe {
    anweisung 1
    anweisung 2
    etc….
    }
    Das verbraucht jedoch viel Speicherplatz und meisten Entwickler schauen nach dem Launch eh nur 2-3 mal im Jahr wieder in die CSS Datei rein. Was eigentlich für ein aufräumen wie der CSS Compressor http://iceyboard.no-ip.org/projects/css_compressor oder http://www.csscruncher.com spricht.

    Zu deinem Problem „CSS-Washing-machine“ (zeige mir tote / nicht benutzte CSS Klassen) hatte der TopStyle Pro CSS Editor mal eine Funktion um das gesamte Projekt zu durchsuchen und tote CSS Klassen anzuzeigen. Eine Google Suche nach „orphan css classes“ zeigt einige Lösungsansätze. Wobei ich sogar noch weiter gehen würde zb „zeige mir Klassen die im ganzen Projekt nur 3-10 mal benutzt werden. Um diese aus der Haupt-CSS Datei raus zunehmen und die Angaben nur auf der Seite selber mit einer Style Anweisung umzusetzen. Da könnte man in der Zentralen CSS Datei noch mal richtig Platz sparen.

    PS: Der CSS Tidy Link ist tot.

Kommentare sind geschlossen.

Kommentare sind geschlossen.