10.01.2008

CSS-Code: Übersichtlich, kurz und knackig

Ein knackig kurzer CSS-Code hat gleich mehrere Vorteile: Geringere Dateigröße, damit schnellere Ladezeit bei geringerem Traffic und Webspace (wenn auch nur marginal), er ist übersichtlich und somit weniger fehleranfällig. Änderungen lassen sich einfacher vornehmen, je weniger man an verschiedenen "Stellschrauben" drehen muss.
Deshalb hier ein paar Tipps, mit denen man den CSS-Code optimieren kann:

1. Die Übersicht bewahren

Je nach Seitenumfang und Gestaltungsvielfalt kommt mit der Zeit schon etliches an CSS-Code zusammen. Da kann man schnell die Übersicht verlieren und muss u.U. lange suchen, bis man die richtige Stelle gefunden hat, um Änderungen vorzunehmen.
Damit alles schön geordnet bleibt sollte man deshalb alles zusammen bündeln, was zusammen gehört: Alle Angaben zur Navigation (Divs, Listen, Links) werden in der CSS-Datei nacheinander aufgelistet und bilden einen "Block". Ebenso verfahren wir mit dem Header, dem Content und weiteren Elementen. Will man später etwas an der Navi ändern, muss man nur an einer Stelle suchen, weil hier alle Navi-Angaben gebündelt sind.

Sehr hilfreich ist es dabei, diese "Bereiche" in der CSS Datei mit entsprechenden Überschriften zu versehen, wobei wir uns der Einfügung von CSS-Kommentaren bedienen. Alles, was zwischen /* und */ steht, ist unschädlich für den CSS-Code und dient dessen Kommentierung.
Eine solche Kommentierung kann auch bei einzelnen Angaben als "Gedächtnisstütze" helfen oder auf bestimmte Zusammenhänge hinweisen.
Das folgende Beispiel ist sicher etwas übertrieben und man braucht nicht unbedingt für jeden Div eine Überschrift, insbesondere nicht, wenn er selbsterklärend ist. Es soll lediglich verdeutlichen, wie manches übersichtlicher und zusammengefasst dargestellt werden kann.
Beispiel 1 ansehen

2. Alle Generalangaben in den Body

Hier nutzen wir den Vorteil der "Vererbung" vom übergeordneten Element auf die nachgeordneten Elemente.
Schriftangaben, die überall gleich sind, müssen nicht in jedem Div hinterlegt werden. Sie kommen nur einmal in den Body und gelten dann automatisch für die komplette Seite.

Sollen Links generell nicht unterstrichen sein, reicht eine einheitliche Angabe im Body mit a: link, a: visited, a: hover {text-decoration: none;} und schon schlägt diese Angabe auf alle weiteren Elemente durch.

Überlegt euch also, welche Angaben ihr zentral im Body hinterlegen könnt. Spätere Änderungen, z.B. bei einem Layoutwechsel, müssen dann nur an dieser einen Stelle vorgenommen werden.
Beispiel 2

3. Gleiche Angaben zusammenfassen

Ihr habt euch entschieden, dass Überschriften generell eine einheitliche Farbe haben sollen. Jedoch sollen für die Überschriftenhierarchien h1 bis h6 unterschiedliche Größen definiert werden. Auch hier fassen wir die identischen Angaben zusammen und definieren anschließend nur noch die spezifischen Werte.
Beispiel 3

4. Kurzschreibweisen nutzen

Viele Einzelangaben können je Eigenschaft zusammengefasst werden. Das gilt z.B. für die Schriftangaben mit "font", die Rahmenwerte mit "border" oder Hintergrundangaben mit "background".
Beachte:
In der Kurzversion ist bei "font" diese Reihenfolge einzuhalten:
font-style, font-variant, font-weight, font-size/line-height, font-family
Beispiel 4

5. Margin- und Paddingwerte in Kurzschreibweise

Sehr effektiv lassen sich Margin- und Paddingwerte verkürzen. Zum einen muss man nicht jede betroffene Elementseite aufrufen, zum andern lassen sich gleiche Werte zusammenfassen.
Die Reihenfolge gibt die Werte im Uhrzeigersinn an: oben, rechts, unten, links.

Sind zwei gegenüberliegende Werte gleich (z.B. oben und unten 5px, links und rechts 10px) lassen sich auch diese Werte zusammenfassen.

Sind sämtliche Werte gleich (z.B. oben, unten, links und rechts je 5px) dann reicht es, wenn der Pixelwert nur einmal angegeben wird.
Beispiel 5

nach oben