Gruppieren von Klassen - CSS übersichtlicher gestalten

[Gast]

Hallo,

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;}

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 funktioniert auch, aber ist das zulässig oder gibt es eine bessere Lösungsmöglichkeit?

Es geht mir einfach darum, die CSS-Datei übersichtlicher zu halten, in dem ich doppelte Eigenschaften vermeide.

Vielen Dank.

MfG
Gast

[suit]

Es funktioniert auch, aber ist das zulässig oder gibt es eine bessere Lösungsmöglichkeit?

Ja, die bessere Möglichkeit ist es, imho auf derart unsinnige Klassen zu verzichten und lieber geeignete HTML-Elemente zu verwenden.

Für überschriften und fliesstext (absätze) gibt es sogar ganz wunderbare Elemente.

Rein von der Systematik ist diese vorgehensweise ansich ok.

[Beat]

ich habe in einer CSS-Datei mehrere Klassen gruppiert und hierüber alle Eigenschaften zugeordnet, die bei allen Klassen gleich sind.

Soweit kein problem.

Allerdings führt das schnell zu einem Mixmax.
ich würde zum Beispiel Klassen nie gemeinsam in eine Liste stellen, welche Children von grundsätzlich verschiedenen IDs sind.

Vereinfachtes Beispiel:

.ueberschrift, .text, .fusszeile {font-family: Arial, Helvetica, sans-serif; color: #000000;}

Beispiele sollen blöd gut sein, oder sie führen deine Frage aufs Glatteis.
Kümmere dich um geeignete Klassenbeschreibungen.

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;}

Wieviele Fusszeilen hast du denn?

Es funktioniert auch, aber ist das zulässig oder gibt es eine bessere Lösungsmöglichkeit?

Ja, Ja

Es geht mir einfach darum, die CSS-Datei übersichtlicher zu halten, in dem ich doppelte Eigenschaften vermeide.

Ordne zuerst nach allgemeiner Spezifitat
zuerst die Standardwerte besonders für ul ol li

Ordne danach Sektionen / äusserste IDs

Nimm Sonderformate zuletzt

Formatiere das CSS geeignet.
Halte eine Ordung in der Aufführung von Eigenschaften ein.

mfg Beat

[Sven Rautenberg]

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

[ChrisB]

Hi Sven,

bezüglich dem Rest deiner Ausführungen stimme ich dir grösstenteils zu - aber:

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...

Auch sowas ist heutzutage kein Grund mehr, "stundenlang zu verzweifeln" - da nimmt man sich ein Tool wie bspw. FireBug, welches in der Lage ist, einem zu einem Element genau anzugeben, welche Formatierungen es vorher erhält - von wo es was "erbt", welche Selektoren angewandt werden, und in welcher Ressource an welcher Position die entsprechenden Regeln notiert sind.

MfG ChrisB