nicht angemeldet
Moin!
ich habe in einer CSS-Datei mehrere Klassen gruppiert und hierüber alle Eigenschaften zugeordnet, die bei allen Klassen gleich sind.
Vereinfachtes Beispiel:
.ueberschrift, .text, .fusszeile {font-family: Arial, Helvetica, sans-serif; color: #000000;}
Das ist solange OK, wie du allen diesen Klassen tatsächlich dieselben Eigenschaften zuweisen willst. Problematisch wird es dann, wenn diese Gemeinsamkeit nicht mehr herrschen soll.
Ich habe die Klassen ein weiteres Mal mit den speziellen Eigenschaften aufgeführt:
.ueberschrift {font-size: 14px; font-weight: bold;}
.text {font-size: 12px;}
.fusszeile {font-size: 10px; font-style: italic;}
Es ist natürlich möglich, die Gemeinsamkeiten von oben an dieser Stelle durch Überschreiben mit abweichenden Eigenschaften zu korrigieren. Allerdings zerstört das dann die Übersicht komplett, denn eine weiter unten korrigierte, abweichende Eigenschaft kann ja nicht mehr weiter oben zentral gesetzt werden. Da wirst du, wenn ausreichend Zeit zwischen CSS-Erstellung nur -Nachbearbeitung vergangen ist, stundenlang verzweifeln, warum denn nur die Fußzeile ihre Schriftart nicht ändert - weil die weiter unten nochmal anders definiert wurde...
Meine Taktik bei CSS-Formatierung ist, möglichst sprechende Selektoren hinzuschreiben. Da ein vernünftiges Dokument in der Regel in unterschiedliche Bereiche zerfällt, denen ich eine ID zuweisen kann (beispielsweise #content, #navi, #header), ist das in der CSS-Datei direkt der erste Aufhänger, um einen sprechenden Selektor zu formulieren.
Und so gibt es eigentlich gar kein Problem, zu verstehen, was denn folgender Selektor formatiert:
#navi dd a
Antwort: Einen Link der zweiten Ebene der Navigation (die erste Ebene würde dt nutzen).
Der zweite Vorteil: Außer dem umschließenden Element mit der ID #navi verwende ich keine beschreibenden Klassen. Das funktioniert leider nicht immer, weil es den IE6 noch gibt, oder weil tatsächlich speziellere Formatierungen notwendig sind, die nur mit Klassen zugewiesen werden können, aber es erleichtert das Schreiben des HTML ziemlich. Vor allem kann man nicht vergessen oder verwechseln, welche Klasse nötig wäre - die Elemente sind automatisch richtig formatiert, wenn man sie logisch korrekt anwendet.
Dummerweise ist unvermeidbar, dass sowohl die Definitionen für einen einzelnen Selektor, als auch die Zahl der Selektoren an sich steigen, je feiner man das Layout definieren muss. Als Richtlinie würde ich empfehlen, Selektoren nach Inhaltsgebieten zu gruppieren. Also zunächst allgemeine Definitionen für die gesamte Seite, dann in der Reihenfolge des Erscheinens die Formatierungen für den Header, dann die Navigation, eventuell dann schon die Fußzeile, und am Ende (weil u.U. am aufwendigsten) alles, was den Content betrifft. Und dort dann eventuell wieder nach Aufgaben gruppiert: Textformatierung, Formulare, Galerieelemente,...
Ziel sollte es sein, dass man beim Arbeiten an einem Aspekt oder einem Seitenelement die zugehörigen CSS-Definitionen so einigermaßen an einem Fleck der CSS-Datei versammelt hat.
Unabdingbar ist allerdings die Firefox-Erweiterung Firebug. Die zeigt einem zuverlässig an, aus welchen Zeilen welcher CSS-Datei jedes HTML-Element Formatierungen erbt, und welche durch Überschreiben doch nicht zum Zuge kommen. Er erlaubt sogar interaktives Verändern der CSS-Definition. Ohne dieses Tool sind CSS-Dateien mit mehr als 1000 Zeilen nicht mehr wirklich beherrschbar - und an diese Zeilenzahl kommt man sehr schnell.
Es geht mir einfach darum, die CSS-Datei übersichtlicher zu halten, in dem ich doppelte Eigenschaften vermeide.
Ich glaube nicht, dass es erstrebenswert sein sollte, CSS-Selektoren bis zum Maximum zu gruppieren. Damit erzeugt man sich nur schlecht bearbeitbare CSS-Dateien.
- Sven Rautenberg