CSS-"Schreibeweise"

[Loon3y]

Hallo,

mal eine kurze Frage zu einer CSS-„schreibweise“.

Wenn man folgenden code hat:

  <div id=“over“>
              <div id=“main“>
                          <div id=“test“>
                                     <p> hallo </p>
                          </div>
              </div>
  </div>

was für einen „sinn“ hat es, im css dann folgendermaßen zu schreiben:

  div#over { }
  div#over div#main { }
  div#over div#main div#test {}
  div#over div#main div#test p {}

und nicht

  #over { }
  #main { }
  #test { }
  p { }

?

Zieht sich bei der ersteren CSS-"Schreibweise" dann nicht irgendwann zu sehr in die Länge mit dem div#.... davor?


Wie macht man dann "classes"?


Vielen Dank schoneinmal für die Antwort.

Gruß Loon3y

 

[Efchen]

Das kannst Du schreiben, wie Du willst.
Wenn Du aber auf zwei unterschiedlichen Seiten Elemente hast, die unterschiedlich sind, aber die selbe ID bekommen, kannst Du damit weiter unterscheiden. Oder aber aus Sicherheit. Je mehr Du in den Selektor schreibst, desto geringer ist die Wahrscheinlichkeit, dass etwas unvorhergesehenes passiert, wenn Du ein anderes Element genauso nennst.

Und Klassen macht man genauso wie IDs, statt "id" schreibt man "class", statt "#" verwendet man "." und Klassen dürfen in mehreren Elementen vorkommen.

 

[prm]

Da Div's auf jeder Seite nur einmal vorkommen dürfen, macht die lange Schreibweise mit ausschließlich Div's m.E. keinerlei Sinn.
Verwende deshalb deine zweite Variante.

Im Zusammenhang mit p (oder anderen Elementen) kann sowas jedoch durchaus sinnvoll sein, allerdings dann wieder verkürzt:
#test p {...} bedeutet die Formatierung aller Absätze, welche innerhalb des Div's #test vorkommen.

Andere Absätze außerhalb von #test kannst du dann entweder generell mit p {...} formatieren, oder unter Bezug auf den entsprechenden Div.

Beispiel:

#test p {color: red;}
#main p {color: green;}

Befinden sich die Absätze in #main, ist die Schriftfarbe grün. Befinden sie sich in #test, dann ist sie rot.

Was dein Gerüst als solches betrifft sollte man sich überlegen, ob diese 3 Div's überhaupt erforderlich sind, oder ob ggf. einer ausreicht.

CSS-Klassen verwendet man, wenn bestimmte Formatierungen auf einer Seite mehrmals vorkommen sollen.

Beispiel:
Um Text besonders hervorzuheben, willst du ihn fett und rot haben.
Du definierst:

.fettrot {font-weight: bold; color: red;}

Nun kannst du das an mehreren Stellen einer Seite einsetzen.

z.B.

Dieser Text ist <span class="fettrot">fett und rot</span>. Danach folgt normaler text und dieser ist wieder <span class="fettrot">wichtig</span>.

 

[Loon3y]

Habt dank für die schnelle Antwort.

Das Beispiel von oben war nur so gestellt um zu verdeutlichen das es isch schon etwas in die Länge ziehen könnte.

allerdings...wenn ich dann so meine seite betrachte...

div#over_outer div#over div#spalten div#sidbar_right p  {  }

Bei einem geteilten hintergrundbild habe ich schonmal 2 <div>, dann musste ich wegen dem menu noch eine spalte um den haupteil machen (3-spaltiges layout) und dann eben das div mit der sidebar. schon ahben wir 4divs...

aber im prinzip könnte ich nun auch einfach

div#sidbar_right p { }

schreiben?

wie schaut es nun aus wenn ich div. formatierungen in verschiedenen elementen gleich habe? sprich z.B. die formatierung von einen <p> in #sidbar_right und #sidebar_left gleich ist.

muss ich dann

div#sidbar_right p { }
div#sidbar_left p { }

schreiben oder lässt sich dies irgendwie in eine zeile schreiben? oder sollte man dann gleich für p einfach eine klasse anlegen?

p.sidebar { }

->

 <p class="sidebar"> </p>

Grüße...

 

[Efchen]

Da Div's auf jeder Seite nur einmal vorkommen dürfen

Ist das die neue Vorshrift zur Vermeidung von div-Suppe? :-)

macht die lange Schreibweise mit ausschließlich Div's m.E. keinerlei Sinn.

Wir lieben uns ja, sagtest Du, daher oute ich mich und bekenne mich zur ersten Variante. Ich schreibe oft mehrere Elemente in den Selektor, auch bei Klassen. Nicht alle, aber mehrere. Ist für mich auch eine Art Übersicht im Stylesheet, weil man sofort seht, wo das Vieh sitzt!

wie schaut es nun aus wenn ich div. formatierungen in verschiedenen elementen gleich habe? sprich z.B. die formatierung von einen <p> in #sidbar_right und #sidebar_left gleich ist.

muss ich dann

Müssen musst Du gar nichts. Aber wenn diese Elemente immer gleich aussehen sollen, bietet sich eine Klasse durchaus an.

oder lässt sich dies irgendwie in eine zeile schreiben?

Auch das:

div#sidbar_right p, div#sidbar_left p { ... }

Grüßchen,
-Efchen

 

[prm]

@ Efchen:
Da du immer alles sehr wörtlich nimmst, korrigiere ich mich:
"Ein ID bestimmter Bezeichnung darf je Seite nur einmal vorkommen."

@Loon3y:
Ich würde die von Efchen zum Schluss genannte Variante wählen.

Falls jedoch die Absatzformatierungen auf der ganzen Seite generell gleich sind, dann reicht p {...}

Eine Klasse für mehrere Absätze ist zwar möglich. Aber die muss man dann auch bei jedem Absatz durch

<p class="klassenbezeichnung">

aufrufen. Das wäre recht umständlich und würde überflüssigen Code verursachen.
Besser deshalb - wenn einheitlich -

div#sidbar_right p, div#sidbar_left p { ... }

. Wobei ich die
Voranstellung von "div" für überflüssig erachte. Spart Quelltext und damit Ladezeit.