Gibt es einen Vorteil für die Verwendung sehr spezifischer Selektoren in CSS?

8

Ich verstehe, dass es in jQuery von Vorteil ist, bei der Verwendung von Selektoren genauer zu sein, damit jQuery nicht das gesamte DOM durchlaufen muss, um das zu finden, wonach Sie suchen. Zum Beispiel ist $('span.description') besser als nur $('.description') , wenn ich weiß, dass die Klasse description immer nur auf <span> elements angewendet wird.

Ist das auch bei CSS so? Gibt es einen besonderen Vorteil für mich, span.description { } anstelle von .description { } zu verwenden? Ich denke in Bezug auf Geschwindigkeit, Optimierung usw. Spare ich dem Browser jede Arbeit, indem ich ihm genau sage, wo er hinschauen soll?

    
Josh Leitzel 13.09.2009, 18:40
quelle

5 Antworten

7

Dies gilt in CSS -

Eine gute Regel besteht darin, von der nächsten ID abzusteigen. IDs werden indiziert, sodass sie extrem schnell gefunden werden können. Es gibt keinen Grund, mehr als einen in Ihrem Selektor zu verwenden.

Google Code - Optimierung des Browser-Renderings

Dies beantwortete viele Fragen, die ich zu diesem Thema hatte, einschließlich dieses Ich hoffe, Sie finden es nützlich.

    
Kelly Gendron 13.09.2009, 18:48
quelle
2

Lesen Sie mehr über CSS-Spezifität - das ist der wichtigste Grund, mehr oder weniger spezifisch mit Ihrem CSS zu sein.

Ссылка

Da die Browser-Performance kein Problem darstellt (außer in jQuery, wie Sie bereits erwähnt haben), sollte meine Richtlinie spezifisch sein, wenn Sie Vorrang haben oder wenn Sie etwas besser lesbar machen wollen Dein CSS. Über das Spezifizieren kann es schwierig machen, css-Selektoren wiederzuverwenden und Dinge übermäßig kompliziert zu machen.

Bearbeiten

Das sieht wie ein Duplikat aus:

CSS-Performance-Frage

    
ScottE 13.09.2009 18:51
quelle
1

es hängt immer von Ihrer Menge an HTML-Code und der Struktur ab. Es ist definitiv eine gute Idee, speziell IDs und entsprechende Selektoren zu verwenden. (zB #nav li anstelle von li.nav). Da der Browser zuerst das HTML lädt und dann das CSS anwendet, hilft man sehr.

In Bezug auf pure css (no jquery) ist der Unterschied in der Geschwindigkeit heutzutage nicht einfach zu unterscheiden, da die Rendering-Engines in hohem Maße optimiert sind - insbesondere wenn es um die Anwendung von CSS geht. Also sollte es normalerweise keine Rolle spielen.

    
Niko 13.09.2009 18:49
quelle
0

Soweit ich weiß, wie spezifisch Ihre Selektoren sind, ist die Performance sehr gering.

Die zwei Bereiche, in denen spezifischere Selektoren am nützlichsten sind, bestehen darin, das Risiko zu reduzieren, dass es nicht dort angewendet wird, wo Sie es nicht wollen, und einen Selektor vor einem anderen zu platzieren.

    
Guffa 13.09.2009 18:48
quelle
-1

Eine spezifischere Regel hat Vorrang vor einer weniger spezifischen Regel, also:

%Vor%

hat Vorrang vor:

%Vor%

(egal in welcher Reihenfolge die Regeln deklariert wurden)

    
Philippe Leybaert 13.09.2009 18:51
quelle