CSS 2.1 ::Tutorials

Tips zum praxisgerechten Aufbau von Style-Sheets

Grundlagen:

Je intensiver man bei der Gestaltung seiner Websites CSS einsetzt, desto länger werden naturgemäß die Style-Sheets. Das Style-Sheet einer kompliziert aufgebauten Website kann schnell einige hundert oder gar über tausend Zeilen umfassen. Behält man dann nicht die Übersicht, kommt es durch Regeln, die man nicht wiederfindet oder an die man sich nicht erinnert, leicht zu unerwünschten Effekten. Wenn es erst soweit ist, dass man bestimmte Selektoren per Suchfunktion aufspüren muß, sind Fehler so gut wie vorprogrammiert. Deshalb sollte man seine Style-Sheets immer nach denselben Prinzipien aufbauen und sich stets strikt an eine einmal etablierte Ordnung halten.

Da jeder Mensch eine andere Arbeitsweise hat, kann es keinen allgemein und umfassend optimierten Aufbau eines Style-Sheets geben. Alle in diesem Artikel vorgestellten Vorschläge zur Anlage von Style-Sheets sind unabhängig voneinander machbar, so dass jeder sie seinem Bedarf entsprechend in seine eigene Arbeitsweise integrieren kann.
TOP

Grundstruktur festlegen

CSS dient der Trennung von Struktur und Inhalt, daraus ergibt sich die grundsätzliche Unterscheidung zwischen Regeln für das Layout und Regeln für die Typografie. Wenn nötig, kann diese Grundstruktur noch, wie in der folgenden Gliederung gezeigt, weiter verfeinert werden:

Layout
- Grundlayout: Kopfteil, Spalten für Inhalt, Navigation usw.
- Verfeinerungen: alle anderen Angaben zur Seiteneinteilung
- usw...
Typografie
- Regeln für Universalselektoren
- Regeln für alle anderen Selektoren
- usw...

Spätere Änderungen lassen sich flexibler durchführen, wenn man die Regeln für Layout und für Typografie von Anfang an in zwei verschiedene CSS-Dateien gelegt hat.
TOP

Übersicht bewahren, nicht mit Platz geizen

Es ist wichtig, dem Style-Sheet eine übersichtliche Struktur zu geben, so dass man sich bei der Arbeit schnell zurechtfindet. Folgende Maßnahmen sind geeignet, zur Übersichtlichkeit eines Style-Sheets beizutragen:

Zwischen den Regeln für unterschiedliche Regelselektoren eine Zeile frei lassen — das trennt die Regeln deutlich voneinander ab;
Selektoren linksbündig notieren und die dazugehörenden Deklarationen einrücken — das macht die Gliederung deutlicher erkennbar;
Nur für HTML-Doctypes: Einfachselektoren (die mit HTML-Elementen korrespondieren) in Großbuchstaben schreiben — so fallen sie beim Scrollen schneller ins Auge;
Die Selektoren sowie jede Deklaration innerhalb einer Regel auf einer eigenen Zeile notieren — die einzelnen Deklarationen einer Regel lassen sich so besser auseinanderhalten;
Bei zusammenfassenden Eigenschaften wie font und background die Werte untereinander eintragen — so erkennt man schneller, welche Eigenschaften deklariert wurden und welche nicht;
Hinter Kommas und Doppelpunkten eine Zeichenbreite Freiraum lassen — durch die Zwischenräume kann das Auge die Inhalte schneller aufnehmen.

/* Schlechtes Beispiel */ body {background:#fffcef url(/images/design/back_3.gif) fixed no-repeat 0px 166px; margin:0px;padding:0px; font:italic 15px georgia,"times new roman",charcoal,serif;} body.ppw {background-color:#332c30; margin:0px;padding:0px;}

/* Gutes Beispiel */ BODY { background: #fffcef url(/images/design/back_3.gif) fixed no-repeat 0px 166px; margin: 0px; padding: 0px; font: italic 15px Georgia, "Times New Roman", Charcoal, serif; } BODY.ppw { background-color: #332c30; margin: 0px; padding: 0px; }

Natürlich stellen alle diese Einrückungen und Leerzeichen eine zusätzliche, wenn auch geringfügige, Belastung der gegebenen Bandbreite dar. Zumindest während der Entwicklungsphase sollte aber der Übersichtlichkeit Priorität eingeräumt werden.
TOP

Gruppierungen sparsam anwenden

Mit Hilfe der Gruppierung lassen sich verschiedene Selektoren zusammenfassen, denen dieselben Eigenschaften zugeordnet werden sollen. Was auf den ersten Blick recht effizient aussieht, entpuppt sich aber beim praktischen Arbeiten als effektive Bremse. Wer kann schon im folgenden Beispiel auf Anhieb erkennen, welche Elemente wie ausgegeben werden?

p,ul,ol,li,div,td,th { font-size:13px; } h1,h2,h3,h4,p,ul>li,ol>li,div,td,th { font-family:Arial,sans-serif; }

Der entscheidende Nachteil dieser Notierung ist aber, dass der Browser eine Regel dann nicht darzustellen braucht, wenn er nur einen Teil eines Selektors nicht versteht. So wird z. B. IE/Win in diesem Fall die zweite Regel ganz übergehen, weil er den Kindselektor (>) nicht interpretieren kann. Deshalb ist es besser, wenn man dasselbe so formatiert:

DIV { font-size: 13px; font-family:Arial,sans-serif; } H1,H2,H3,H4 { font-family:Arial,sans-serif; } OL>LI { font-size: 13px; font-family:Arial,sans-serif; } UL>LI { font-size: 13px; font-family:Arial,sans-serif; } OL { font-size: 13px; font-family:Arial,sans-serif; } P { font-size: 13px; font-family:Arial,sans-serif; } TD { font-size: 13px; font-family:Arial,sans-serif; } TH { font-size: 13px; font-family:Arial,sans-serif; }

Dass die Überschriftelemente H1 bis H4 hier in einer Regel belassen wurden, hat einfach den Grund, dass sie bei alphabetischer Ordnung sowieso hintereinander stehen und dass für alle vier exakt die gleiche Regel gelten soll. (Dieses Beispiel soll nur die Formatierung darstellen — in der Praxis werden grundsätzliche Deklarierungen der Schriftart nicht x-mal wiederholt, sondern durch Vererbung an jedem Element angebracht.)
TOP

Regeln sinnvoll sortieren

Die Sortierung der Regeln in einer Style-Sheet-Datei hat einen wesentlichen Einfluß darauf, wie einfach sich die Regeln wiederfinden lassen, ergo: wie zügig man arbeiten kann.

Selbstverständlich kann eine Style-Sheet-Datei nach verschiedenen Gesichtspunkten sortiert werden, z. B. kann man zuerst alle Linkformatierungen notieren, dann alles, was mit Formularen zu tun hat, danach alle grafikorientierten Regeln, dann alles, was mit Tabellen zu tun hat usw. Hierzu sollte man sein Style-Sheet sehr gut kennen oder die Unterteilung gut dokumentiert haben.

Zumindest für kleinere Style-Sheets ist es oft einfacher, von Anfang an streng alphabetisch nach Selektoren zu sortieren. Das bewirkt auch, dass alle universal definierten Attributselektoren (.class und #ID) direkt untereinander stehen.

Kompliziertere Selektoren kann man einfach nach dem ersten Zeichen einer Regel ordnen, oder nach dem Element, auf das die aktuelle Regel wirkt. So lässt sich die Regel H1 * P { ... } unter 'H' oder unter 'P' einordnen; oder: die Regel OL + P { ... } kann unter 'O' oder 'P' eingeordnet werden. Die jeweils zweitgenannte Möglichkeit hat den Vorteil, dass alle Regeln, die auf die gleichen Elemente wirken, untereinander stehen.

In beiden Fällen ist es ratsam, sich bei jeder Änderung des Style-Sheets strikt an die einmal gewählten Ordnungskriterien zu halten.
TOP

Nur die Regeln definieren, die gebraucht werden...

Auch wenn die Darstellung von Styledefinitionen in allen modernen Browsern relativ konsistent ist, so ist sie noch lange nicht einheitlich. Daher kann man leicht auf den Gedanken verfallen, vorsorglich Formatierungen für alle möglichen Elemente oder deren Kombinationen zu definieren, um dadurch eine gewisse Einheitlichkeit zu erzwingen, bevor man ein Projekt beginnt. In der Praxis ist diese Herangehensweise jedoch nutzlos, denn es macht keinen Sinn, Selektoren im Style-Sheet zu definieren, deren korrespondierende Elemente im HTML nicht vorkommen. Lediglich Elemente, die innerhalb der aktuellen Website auch auftreten, sollten im Style-Sheet formatiert werden.
TOP

...aber alle Deklarationen, die nötig sein könnten

Hier geht es hauptsächlich darum, einen möglichen Einfluß von Benutzer-Style-Sheets zu minimieren, der der Darstellung abträglich sein könnte. Dies trifft insbesondere für Textformatierungen, die Abstände padding und margin sowie die Farbangaben des Vorder- und Hintergrundes zu. In diesem Zusammenhang ist es durchaus nicht falsch, Ausgangswerte explizit zu definieren, wenn es angebracht erscheint, z.B. { margin: 0; }.
TOP

Klassenselektoren nicht universal anwenden

Will man Klassen oder Identifizierer einsetzen, sollte man diese wann immer möglich auch im Stylesheet auf das Element beziehen, für das sie gedacht sind. So ist es beispielsweise besser, P.inhalt { ... } zu definieren als .inhalt { ... }, wenn die Klasse inhalt nur für P gebraucht wird.
TOP

So wenig Klassenselektoren wie möglich verwenden

Es kommt oft vor, dass man dieselben Regeln auf verschiedene Elemente anwenden muß, zum Beispiel, wenn Listen und Absätze in einem bestimmten Teil der Seite dieselbe Schriftart und Zeilenhöhe haben sollen. In diesem Fall ist es besser, die entsprechenden Elemente wie Nachfahrenselektoren des übergeordneten div-Abschnitts zu formatieren. Dadurch erspart man sich, jedes HTML-Element mit einem class-Attribut versehen zu müssen — der Code wird übersichtlicher und man kommt der Trennung von Formatierung und Inhalt wieder einen Schritt näher.

Nicht so gutes Beispiel:

<html> <head> <style type="text/css"> OL.inhalt { font:15px/1.4 "trebuchet MS",Verdana,sans-serif; } P.inhalt { font:15px/1.4 "trebuchet MS",Verdana,sans-serif; } UL.inhalt { font:15px/1.4 "trebuchet MS",Verdana,sans-serif; } </style> </head> <body> <div ID="maincontent"> <p class="inhalt"> ... </p> <ul class="inhalt"> <li> ... </li> </ul> <p class="inhalt"> ... </p> <ol class="inhalt"> <li> ... </li> </ol> </div> </body> </html>

Besseres Beispiel:

<html> <head> <style type="text/css"> DIV#maincontent OL { font:15px/1.4 "trebuchet MS",Verdana,sans-serif; } DIV#maincontent P { font:15px/1.4 "trebuchet MS",Verdana,sans-serif; } DIV#maincontent UL { font:15px/1.4 "trebuchet MS",Verdana,sans-serif; } </style> </head> <body> <div ID="maincontent"> <p> ... </p> <ul> <li> ... </li> </ul> <p> ... </p> <ol> <li> ... </li> </ol> </div> </body> </html>

TOP

Zusammenfassende Eigenschaften verwenden

Wo immer möglich, sollten zusammenfassende Eigenschaften zum Einsatz kommen. Das hält das Style-Sheet kürzer und ist einfacher zu übersehen.

Aus:

H1 { font-weight: bold; font-style: italics; font-size: 24px; font-family: 'Trebuchet MS', sans-serif; line-height: 1.5; margin-top: 2em; margin-bottom: 0.5em; margin-left: 5%; margin-right: 10px; }

wird dann:

H1 { font: bold italics 24px/1.5 'Trebuchet MS', sans-serif; margin: 2em 10px 0.5em 5%; }

TOP

Kommentare verwenden

Sollte es trotz allem einmal zu unübersichtlich werden, kann man immer noch Kommentarzeilen einfügen. Insbesondere lassen sich einzelne Abschnitte eines Style-Sheets gut durch Kommentare kennzeichnen. Aber auch, wenn man besondere Hacks verwendet hat, ist es vorteilhaft, sie durch Kommentare besonders herauszustellen.

/* comment */ E { eigenschaft: wert; }

TOP

Fazit: Alles kann, aber nichts muss

Zum Abschluß soll noch erwähnt werden, dass alle hier beschriebenen Maßnahmen kein Pflichtprogramm sind — CSS funktioniert auch, wenn man sie nicht beachtet. Sie tragen aber wesentlich zur Effizienz und Fehlerfindung während der Entwicklungsphase oder späteren Ergänzungen bei.
TOP(kl)

Letzte Änderung dieser Seite am: 05-Oct-2004.