Neulich im XING-Forum »Webdesign und Usability« hatten wir eine lange Diskussion zum Thema, und weil ich gerade bei xwolf einen weiteren Beitrag über »Extrem-Divitis« gelesen habe (vermutlich berechtigt, aber siehe nachfolgenden Punkt 4), nehme ich das mal zum Anlass, ein paar von den divs zu zerpflücken. Hier die Thesen:

Sowas wie Thesen

1. Divitis ist niemals richtig böse, sondern allenfalls störend.
2. Divitis ist browserbedingt (Box-Model) sehr weit verbreitet und in vielen Fällen sinnvoll/nachvollziehbar (Stichwort auch: YAML).
3. Divitis kann bei großen Projekten sehr heilsam sein (Erweiterbarkeit).
4. Divitis kann nur dann richtig prognostiziert werden, wenn die Frontendstruktur vollständig bekannt ist. Ein erster und zweiter Blick reichen dafür selten aus.

Ich brauche Code.

Divitis oder nicht?

<div id="a" class="..">
   <div id="b1">
      <div class="c">
         <div class="d1">
            <div class="e">
               <p>Hallo Welt!</p>
            </div><!-- e -->
         </div><!-- d1 -->
         <div class="d2">
            ..
         </div><!-- d2 -->
      </div><!-- c -->
   </div><!-- b1 -->
   <div id="b2">
      ..
   </div><!-- b2 -->
</div><!-- a -->

Auf den ersten Blick: verdammt, ja!
Auf den zweiten Blick: vermutlich, ja.

Wenn man aber die (beispielhaft ausgedachte) Frontend-Struktur kennt und von innen nach außen geht:

• .e hält den eigentlichen Content auf Abstand, wenn es kein pixelbasiertes Layout ist und dementsprechend die Ausmaße von Inhaltsbereichen nicht bekannt sind
• .d1 und .d2 bilden zwei Spalten
• .c ist umschließender Wrapper und nötig, um floats aufzuheben und den Abstand nach unten zu schaffen
• #b1 und #b2 gruppieren den ganzen Kram und agieren als Elternelement für Styleangaben, die von oben »durchgegeben« werden, nämlich von..
• #a, das dynamisch seine Klasse verändern kann, um z.B. wahlweise #b1 oder #b2 auszublenden oder zu verändern

Auf den dritten Blick ist also jedes einzelne dieser divs notwendig, um Layout und Funktionalität abzubilden. Und das Beispiel war noch harmlos, denn obiges Gebilde könnte allein der kleine Inhalt von nur einer Spalte oder eines Inhaltsbereichs sein. Und er hat nichtmal abgerundete Ecken. Denken wir uns einen flotten Dreispalter drumrum, und wir könnten locker 238-503 divs draus machen, die allsamt irgendwie notwendig sind.

Klar,

natürlich sollte man jedes überflüssige <div></div> vermeiden. Aber es ist oft nicht einfach, zu erkennen, wann ein <div></div> wirklich überflüssig ist. Für Außenstehende mag deshalb die Regel gelten:

Man spricht nicht über Krankheiten.

Und um mal wieder positiv aus dieser Nummer rauszukommen, gibt’s auch eine Empfehlung für Webautoren:

Benutze kein div, wenn ein anderes Element sinnvoller wäre und vermeide jedes div, das nicht notwendig ist.

Irgendwie geht’s doch wieder nur ums Bauchgefühl.