Objektorientiertes CSS

[suit]

Der Ansatz klingt interessant. Was haltet ihr davon?

Ich verstehe nicht, was das mit Objektorientierung zu tun hat. Es scheint schlicht eine Möglichkeit zu sein, CSS sinnvoll zu gestalten.

Gleichzeitig wird aber verlangt, die Präsentation und Inhalt zu trennen aber die Sache "modular" zu gestalten, was dazu führt, dass man viele redundante HTML-Elemente hinzufügt.

"1. Vermeide einen Zusammenhang zwischen Elementen und Klassendeklarationen"

Warum? Wenn ich möchte, dass span-Elemente der Klasse .warnhinweis rot hinterlegt und Kursiv sind und div-Elemente der Klasse .warnhinweis einen dunkelroten Rahmen haben und eingerückt sind, ist es doch sinnvoll den Elementnamen in den Selektor aufzunehmen?

Natürlich sollten überflüssige Selektorketten vermieden werden - was das mit Objektorientierung zu tun hat, versteh ich immer noch nicht.

2. Vermeide Deklarationen, die an einen Elementbaum gebunden sind
Warum? Was spricht gegen html[lang="en"] .klasse {}?

3. Minimiere den Einsatz von CSS-Selektoren
Eh klar - aber was hat das mit Objektorientierung zu tun?

4. Vermeide die Verwendung von ID Selektoren für inhaltliche Elemente
Den versteh ich nicht. Klärt mich auf.

Ich habe irgendwie das Gefühl, dass diese "Objekte" dazu führen können, oft gebrauchte eigenschaften sinnloserweise zu gruppieren.

Besonders wenn ich sowas sehe ...

<div class="mod">  
        <div class="inner">  
                <div class="hd">Block Head</div>  
                <div class="bd">Block Body</div>  
                <div class="ft">Block Foot</div>  
        </div>  
</div>

... habe ich das Gefühl, da könnte sowas rauskommen:

.box {  
  border: 1px solid blue;  
  background: green;  
}  
  
.text {  
  color: white;  
}

<div class="box">  
  <div class="text">  
    foo bar  
  </div>  
</div>  

Auf der Seite sieht mann dann auch noch solche Glanzstücke:

<div class="leftCol myColumn"> ... </div>  

leftCol? Wie war das mit Darstellung und Inhalt trennen?

Darunter steht dann "Is this semantic? Will I end up with classes like .formYellow or tinyBlueH2?":

So wie ich das lese bläht sich das HTML durch die "Module" unnötig auf, das CSS schrumpft im Vergleich zu einem vernünftigen CSS unwesentlich bis garnicht oder wird sogar größer.