Gibt es einen Vorteil der Verwendung von sehr spezifischen Selektoren in CSS?

Question

Ich verstehe, dass in jQuery, ist es vorteilhaft ist präziser zu sein, wenn Selektoren so dass jQuery nicht den gesamten DOM zu durchqueren muss das finden, was Sie suchen. Zum Beispiel ist $('span.description') besser als nur $('.description') wenn ich, dass die description Klasse weiß, ist immer nur Elemente <span> angewandt.

Ist dies der Fall mit CSS auch? Gibt es einen besonderen Vorteil für mich span.description { } statt .description { } zu benutzen? Ich bin in Bezug auf die Geschwindigkeit denken, Optimierung usw. Bin ich der Browser jede Arbeit sparen, indem sie genau, wo zu sagen aussehen?

Answer 1

Dies gilt in CSS -

Eine gute Regel ist von der nächsten ID abzusteigen. IDs sind indexiert sie so Ortung ist extrem schnell. Es gibt keinen Grund mehr als eine in Ihren Wählern zu verwenden.

Google Code- optimieren Browser Rendering

Das beantwortet viele Fragen, die ich zu diesem Thema hatte auch dieses ein- Ich hoffe, Sie finden es nützlich.

Answer 2

auf CSS Spezifität Lesen Sie up -., Die der wichtigste Grund ist, mehr oder weniger spezifisch mit CSS zu sein

http://www.w3.org/TR/CSS2/cascade .html # Spezifität

Als Browser-Leistung ist so ziemlich kein Thema (außer in jquery, wie Sie erwähnt haben), ist meine Leitlinie spezifisch zu sein, wenn Sie Vorrang steuern, oder wenn Sie wollen etwas ein bisschen mehr lesbar machen Ihre CSS. Über Spezifizierungs kann es schwierig machen CSS-Selektoren wiederverwenden und die Dinge zu kompliziert machen.

Bearbeiten

Das sieht ein bisschen wie ein Duplikat:

CSS Leistung Frage

Answer 3

es ist immer abhängig von Ihrer Menge von HTML-Code und die Struktur. Es ist auf jeden Fall eine gute Idee zu verwenden, vor allem IDs und entsprechende Selektoren. (Dh #nav li statt li.nav). Da Browser zuerst die html laden und dann gelten die CSS Ihnen viel helfen.

Dieser sagte, wenn es um reine CSS kommt (kein jquery) die Geschwindigkeitsdifferenz ist heutzutage nicht leicht zu unterscheiden, da das Rendering-Engines hoch optimiert werden - vor allem, wenn es darum geht, CSS Anwendung. Also normalerweise sollte es keine Rolle.

Answer 4

Soweit ich weiß, wie spezifisch Ihre Wähler sind auf der Leistung sehr wenig Unterschied machen.

Die beiden Bereiche, in denen spezifischeren Selektoren am nützlichsten sind, ist das Risiko zu verringern, dass es nicht angewendet wird, wo Sie es nicht wollen, und ein Selektor Vorrang vor dem anderen nehmen zu machen.

Answer 5

Eine spezifischere Regel hat Vorrang vor einer weniger spezifischen Regel so:

span.myclass {}

hat Vorrang vor:

.myclass {}

(egal, was die Reihenfolge, in der die Regeln erklärt wurden)