In Ihrem dritten Beispiel geht es um die Verkettung von einfachen Selektoren über den Descendant Combinator, der wie eine unschärfere und langsamere Version des Child Combinators ist. Wenn Sie den IE6 nicht unterstützen, sollten Sie stattdessen lieber den Child-Combinator verwenden.

Zum Beispiel #twitter p vs. #twitter>p. Zuerst sammelt der Browser alle p Elemente, dann geht er eine Ebene höher und prüft, ob dieses Element die ID „twitter“ hat. Ist dies nicht der Fall, bleibt der Browser hier stehen, wenn Sie den Child-Kombinator verwendet haben. Mit dem Deszendenten-Kombinator wird er den ganzen Weg bis zum Wurzelknoten zurücklegen (wenn er auf dem Weg dorthin nicht auf #twitter stößt). Falsch-positive Ergebnisse sind also mit dem Deszendenten-Kombinator immer etwas langsamer.

Das größere Problem mit dem Deszendenten-Kombinator ist seine Unschärfe, die die Möglichkeit von Kollisionen erhöht. Als Nebeneffekt wird das Erstellen von beliebig verschachtelbaren Strukturen sehr viel schwieriger.

.container #twitter p ist auch zu spezifisch. Willst du wirklich, dass p Elemente innerhalb von #twitter anders aussehen, wenn #twitter nicht innerhalb von .container ist?

Ein weiteres Problem ist, dass .container ein Ort ist und nicht Teil der Struktur. Also, ja… diese Regel ist nicht wiederverwendbar.

Skalierbares CSS = wiederverwendbarer Code = Klassen. Id-basierte Regeln sind per Definition nicht wiederverwendbar.

Leave a comment

Deine E-Mail-Adresse wird nicht veröffentlicht.