CSS 2.1 ::Tutorials

Tipps zum praxisgerechten Aufbau von Stylesheets

Hintergrund:

Je intensiver man bei der Gestaltung seiner Websites CSS einsetzt, desto länger werden naturgemäß die Stylesheets. Die Regeln für eine kompliziert aufgebaute Website können schnell einige hundert oder gar über tausend Zeilen umfassen, die vielleicht auf ein Dutzend oder mehr Dateien verteilt sind. 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 Stylesheets immer nach denselben Prinzipien aufbauen und sich stets strikt an eine einmal etablierte Ordnung halten.

Stylesheets planen

Bevor man mit der Arbeit an einer Website beginnt, erstellt man in der Regel einen Plan, der alle notwendigen Aufgaben beinhaltet. Dabei bleiben die Stylesheets oft unberücksichtigt. Bei der eigentlichen Produktion der Site notieren viele Webdesigner die CSS-Regeln dann ad hoc, so wie sie gerade benötigt werden. Diese Vorgehensweise führt früher oder später zu einem schwer durchschaubaren Nebeneinander von Einzelregeln im Stylesheet.

Die daraus resultierende Ineffizienz läßt sich vermeiden, wenn man sein Stylesheet von Beginn an ebenso sorgfältig plant wie alles andere. Dazu gehört einerseits, dass man für alle geplanten Features einer Website eine grobe Idee hat, wie man sie in CSS umsetzen kann. Andererseits sollte man vorher festlegen, wieviele Stylesheets man benötigt, wie man sie strukturiert, und welche Regeln in welches Stylesheet bzw. in welchen Teil eines Stylesheets gehören.

Für größere Websites: mehrere Stylesheets verwenden

Für kleinere Websites ist es durchaus sinnvoll, alle Regeln in einem einzelnen zentral gepflegten Stylesheet zusammenzufassen. Wie sieht es aber mit Websites größerer Organisationen aus, in denen die verschiedenen Abteilungen ihre Seiten oft unabhängig voneinander pflegen? Da sind oft völlig unterschiedliche Vorstellungen zu berücksichtigen: beispielsweise hat das Konstruktionsbüro, das seine Produkte vorstellen will, andere Anforderungen an die Webpräsenz als der Kundenservice. So kann es leicht zu einem Alptraum werden, die unterschiedlichen Vorstellungen und Einzelregeln dieser Gruppen unter einen Hut zu bringen, sprich: in einem Stylesheet zu vereinigen.

Hier hat es sich als praktisch erwiesen, wenn man zunächst Formatierungsrichtlinien erstellt, die allgemeine Vorgaben enthalten. Sie sollten für alle verbindlich und so abgefasst sein, dass individuelle Erweiterungen das Gesamtbild nicht stören. Durch solche Maßgaben wird sichergestellt, dass die äußere Erscheinung einer Website für alle Seiten gleich ist.

Diese Richtlinien werden in einem Grund-Stylesheet zusammengefasst. Zusätzliche Stylesheets sind dann denkbar für verschiedene Abteilungen, Produktkategorien, usw. Hier besteht für jedes Ressort die Möglichkeit, Ergänzungen einzufügen, die seinen eigenen Bedürfnissen entsprechen. Bei einem weiteren Wachstum der Site lassen sich so auch recht einfach zusätzliche Stylesheets einfügen. (Der Anschluss von Stylesheets an ein Webdokument wird im Artikel Anbindung von CSS an HTML ausführlich beschrieben.)

Stylesheets für Sonderseiten in Extradatei speichern

CSS bietet den großen Vorteil, dass sich die Gestaltung aller Seiten einer Website in einer einzigen Datei zusammenfassen lässt. Gelegentlich möchte man aber dennoch einzelne Seiten anders gestalten, z. B. um auf aktuelle Angebote oder Veranstaltungen hinzuweisen. Dazu müssen neue Regeln eingeführt werden, mit neuen Klassen, mit anderen Spezifizitäten, die den vorhandenen Regeln oftmals widersprechen und Konfusion in das Stylesheet bringen.

Wirklich?

Nein, denn es bietet sich hier an, die speziellen Regeln in einem style-Bereich im Kopf des Webdokuments zu halten. Sollten die Regeln zu viel Platz beanspruchen, können sie auch in eine Extradatei ausgelagert werden.

Dazu kann man einfach die gegebene Struktur verwenden. Mit ein wenig Vorausplanung lässt sich die Struktur einer Website so erstellen, dass Sonderseiten schnell und einfach eingefügt werden können. Deshalb ist es nicht nötig, neue Klassen und IDs oder gar Inline-Styles einzuführen, sondern man braucht nur für die vorhandenen Selektoren neue Regeln zu definieren.
TOP

Stylesheets übersichtlich managen

Hier sollen einige PraxisTipps gegeben werden, die das Arbeiten mit Stylesheets wesentlich vereinfachen. Da aber jeder Mensch eine andere Arbeitsweise hat, kann es keinen allgemein und umfassend optimierten Aufbau eines Stylesheets geben. Alle hier vorgestellten Vorschläge zur Anlage von Stylesheets sind unabhängig voneinander machbar, so dass jeder sie seinem Bedarf entsprechend in seine eigene Arbeitsweise integrieren kann.

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:

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

Übersicht bewahren, nicht mit Platz geizen

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

/* 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 Stylesheet-Datei hat einen wesentlichen Einfluß darauf, wie einfach sich die Regeln wiederfinden lassen, ergo: wie zügig man arbeiten kann.

Selbstverständlich kann eine Stylesheet-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 Stylesheet sehr gut kennen oder die Unterteilung gut dokumentiert haben.

Zumindest für kleinere Stylesheets 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 allen Fällen ist es ratsam, sich bei jeder Änderung des Stylesheets 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 Stylesheet zu definieren, deren korrespondierende Elemente im HTML nicht vorkommen. Lediglich Elemente, die innerhalb der aktuellen Website auch auftreten, sollten im Stylesheet formatiert werden.
TOP

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

Hier geht es hauptsächlich darum, einen möglichen Einfluß von Benutzer-Stylesheets 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

Kurzschrift-Eigenschaften verwenden

Wo immer möglich, sollten Kurzschrift-Eigenschaften zum Einsatz kommen. Das hält das Stylesheet 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 Stylesheets gut durch Kommentare voneinander abtrennen. 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

Home|Vollreferenz|Schnellreferenz|Grundlegendes|Tutorials & Artikel|Quiz|Allgemeines

© Copyright All Contents 2002-2023
Commercial Use prohibited.

Notizen: