CSS optimieren: Narrow Definition (#mytable tbody span.myclass) besser?

Question

Ich fragte mich, ob eine ‚Narrow‘ Definition wie

#mytable tbody span.myclass 
{ 
    color: #ffffff; 
} 

besser/schneller als

nur zu analysieren

.myclass 
{ 
    color: #ffffff; 
} 

ich angeblich irgendwo, dass enge Definitionen lesen tatsächlich einige haben Art von Adverser-Effekt auf CSS-Geschwindigkeit, aber ich kann mich nicht erinnern, wo und es schon eine Weile her ist, also wollte ich nur klären, ob es wichtig ist oder nicht, und wenn ja, welche Lösung ist besser/schneller.

Vielen Dank!

Answer 1

Die Seitengeschwindigkeit von Google enthält einige Informationen zu using efficient CSS selectors. Ich schlage vor, dort anzufangen.

So (sehr) im Grunde empfehlen sie zu:

Vermeiden Nachfahrenselektoren, insbesondere solche, die redundante Vorfahren

So Ihre zweite Option ist die schnellste angeben.

Answer 2

Ich würde für das ehemalige Schnipsel entscheiden und sich nicht um irgendeine Effizienz kümmern; Wenn Sie nicht etwa ein Dutzend Stylesheets haben, ist CSS kein Flaschenhals. Das frühere Snippet ist besser lesbar und Sie wissen genau, was Sie stylen, und wo es strukturell gehört, wenn Sie also zurückspringen, um Änderungen vorzunehmen, wissen Sie, wonach Sie suchen müssen.

Dann noch einmal, wenn Sie globale Stile wie eine Klasse zu Floaten zu machen machen, wäre es besser, es einfach zu halten.

Answer 3

"Speed-Optimierung" sollte wirklich keine Sorgen mit CSS sein. Der Unterschied in jedem modernen Browser ist gering, aber der Unterschied in der Nutzung ist nicht. Sie sollten entscheiden, wann Sie "schmale" oder "breite" Selektoren verwenden möchten, je nachdem, was Sie erreichen möchten, wie weit Sie Stile kaskadieren möchten, wo Sie sie anwenden möchten und ob Sie einen breiteren Selektor überschreiben müssen.