[Sonstige] Aufbau CSS

[Alexander86]

Hallo,

ich hätte jetzt noch eine konzeptionelle Frage.
Ich habe nun den Rahmen für meine Homepage (Layout, Banner, Navigationsleisten) soweit fertig. Jetzt möchte ich die Inhalte der Seiten (Überschriften, Absätze, Listen, Hyperlinks usw.) mit CSS stylen.
Wie mache ich das jetzt am Besten? Definiere ich da z.B. global alle h1-Elemente (h1 {...}) oder nur bestimmte Elemente mithilfe von Klassen oder oft sieht man auch so etwas wie #inhaltsbereich h1 {...}? Denn es kann ja auch mal mehrere verschiedene Styles geben für ein Element. In der Sidebar könnten h1-Elemente ja auch anders aussehen als die anderen.
Ich möchte z.B. das ungeordnete Listen eine Grafik als Aufzählungszeichen haben. Wenn ich schreibe ul {list-style-image: url(...)} dann hätte das auch Auswirkungen auf die ul-Elemente, die die Navigation bilden. Für diese müsste ich die Eigenschaft dann wieder rückgängig machen.

Da ist mir jetzt einfach nicht klar, ob man für alle Elemente eines Typs eine Art Standardformat definiert, das dann für alle Elemente gilt, für die nichts anderes definiert wird oder ob man die globalen Definitionen weglässt, was zur Folge hätte dass sich spezielle Formate nicht ändern, wenn man das Standardformat ändert.

Ich hoffe mal man versteht halbwegs, was ich meine.

Gruß Alex

[mogidala]

Also ich persönlich arbeite von grob nach fein, sprich, erstmal alles allgemeingültige formatieren wie eben überschriften, absätze usw. wenn ich dann spezielle angaben brauche, kann ich das ja immernoch nachträglich machen. es ist wenig sinnvoll, jeder überschrift ne eigene klasse mitzugeben, da das den code nur unnötig aufbläht.

es ist ja auch alles eine frage der sinnhaftigkeit. standardkonformes html und css hat ja zum ziel, so wenig code wie möglich zu genererieren und die "verwaltung" so einfach wie möglich zu halten, ich arbeite daher meist nach der devise so viel css wie nötig, so wenig wie möglich.

[Boris]

Es gibt da keine "Regeln", wie man zum gewünschten Ergebnis kommt.

Ich mache es z.B. so, dass bestimmte Bereiche ein eigenes DIV bekommen (Navigation, Inhalt, Seitenleiste, Footer). Die Elemente, die darin vorkommen, gestalte ich dann halt entsprechend:

#navigation ul{...}
#inhalt ul{...}

Wenn ich im Inhalt nun zwei UL Listen haben will, die unterschiedlich sind, vergebe ich denen dann Klassen .listegruen oder .listesowieso.

Das halt auch entsprechend für die anderen Elemente wie H1-H6, P usw.

Aber das ist wie gesagt meine Arbeitsweise.

[Alexander86]

Zitat von Boris

Es gibt da keine "Regeln", wie man zum gewünschten Ergebnis kommt.

Ich mache es z.B. so, dass bestimmte Bereiche ein eigenes DIV bekommen (Navigation, Inhalt, Seitenleiste, Footer). Die Elemente, die darin vorkommen, gestalte ich dann halt entsprechend:

#navigation ul{...}
#inhalt ul{...}

Wenn ich im Inhalt nun zwei UL Listen haben will, die unterschiedlich sind, vergebe ich denen dann Klassen .listegruen oder .listesowieso.

Das halt auch entsprechend für die anderen Elemente wie H1-H6, P usw.

Aber das ist wie gesagt meine Arbeitsweise.

Man könnte aber auch schreiben:

ul {...}
#navigation ul {...}

Das wäre dann genau so wie du es im Inhalt machst mit den beiden Klassen.
Das hätte den Vorteil, dass für alle Bereiche ausser den explizit definierten die erste Regel gilt. Wenn ein neuer Bereich dazukommt müsste man dann ul nicht neu definieren, wenn diese Liste nicht vom Standard abweicht. Andererseits muss man aber eventuell alle speziellen Regeln ändern wenn man die allgemeine Regel ändert (z.B. ein Attribut hinzufügt).

[sejuma]

Das ist richtig.

Wenn du also Elemente hast, die allgemein formatiert werden und in verschiedenen Bereichen vorkommen können, dann solltest du das auch allgemein machen.
Wenn es dann bezogen auf einen bestimmten Bereich Abweichungen gibt, stellst du eben den #div vornedran.

[Alexander86]

Zitat von sejuma

Das ist richtig.

Wenn du also Elemente hast, die allgemein formatiert werden und in verschiedenen Bereichen vorkommen können, dann solltest du das auch allgemein machen.
Wenn es dann bezogen auf einen bestimmten Bereich Abweichungen gibt, stellst du eben den #div vornedran.

Ich habe 4 Bereiche. Header, Links, Rechts, Inhalt. Überschriften gibt es im Inhaltsbereich und in der rechten Sidebar. Diese unterscheiden sich aber optisch. ul-Listen gibt es im Inhaltsbereich mit grafischem Aufzählungszeichen und im Header und in der linken Sidebar als Navigationsleiste. Kann ich das CSS dann wie folgt aufbauen?

#rechts h1 {...} /* Formate für Überschriften in der rechten Sidebar */
h1 {...} /* Formate für alle anderen Überschriften (Inhaltsbereich) */
#header ul {list-style-image:none;...} /* Formate für die Liste der 1. Navigation */
#links ul {list-style-image:none;...} /* Formate für die Liste der 2. Navigation */
ul {list-style-image:url(...);...} /* Formate für alle anderen Listen (Inhaltsbereich) */

[sejuma]

Ja, das geht so.