Geschwindigkeit/Redundanz der Selektoren in CSS

Question

Hat jemand Informationen über Browser-Selektor Geschwindigkeiten in CSS? Mit anderen Worten, wie verschiedene Selektoren miteinander verglichen werden (im selben Browser).

Zum Beispiel habe ich oft sehen (und schreiben) Code wie folgt:

#content #elem { ...rules... } 

Aber da diese Elemente eindeutige IDs sind, sollte ich nur #elem brauchen, nicht wahr? Das brachte mich dazu, darüber nachzudenken, ob es für Browser vielleicht schneller ist, komplexere Selektoren zu haben - ich denke, dass ein Browser #content finden könnte und nur in dieses Element schauen könnte, nirgendwo sonst.

könnte Ein weiteres Beispiel table tr td .class vs table .class

Answer 1

Um ehrlich zu sein, redest du so wenig Zeit, dass ich glaube nicht, dass es wirklich einen Unterschied macht.

In Bezug auf die spezifischeren Selektoren - ich denke, das für ein paar Gründe, gute Praxis ist:

1. Es verbessert die Lesbarkeit Code - auf einen Blick mehr sehen, wo Sie Selektoren relativ angewendet werden zum HTML.
2. Es verringert die Wahrscheinlichkeit, dass Ihre Selektoren irgendwo anders überschrieben werden, da ein Selektor mit noch größerer Spezifität geschrieben werden müsste, was sehr unwahrscheinlich ist.

Was Sie sprechen kann einen Unterschied machen, wenn JavaScript-Bibliotheken wie jQuery verwenden - wie sie das gesamte Dokument selbst zu analysieren haben, aber ich habe sicherlich bemerkt, nie irgendwelche Geschwindigkeitsdifferenzen mich.

Answer 2

Es ist ein Unterschied in der Geschwindigkeit sein könnte, aber in seinem nicht den normalen Gebrauch Fall wahrnehmbaren in. Der wahre Grund, um Ihr CSS so zu schreiben, ist Spezifität. Das heißt, wenn Sie

#content #elem {color: black;} 

und

#elem {color: red;} 

Das Element sollte schwarz gefärbt sein, denn das ist die spezifischere Regel ist.

Answer 3

Nicht ein weiser Typ, aber die Zeit, die Sie zum Schreiben dieser Frage gebraucht haben, übersteigt wahrscheinlich die Summe aller Zeiteinsparungen aller Benutzer, die Ihre Website besuchen werden (in Bezug auf #id # id2 vs # id2)). Das Gleiche gilt für die Zeit, diese Antwort zu schreiben ....

Sie können wir stimmen jetzt nach unten :)

Answer 4

Here sind einige Informationen, die ich nach einem schnellen Suchlauf.

Answer 5

Mozilla's guidelines könnte interessant sein.

Answer 6

1. Es gibt immer eine Auswahl zwischen Effizienz und Lesbarkeit. Natürlich table tr td .class ist am besten lesbar, aber sehr ineffizient und kann vereinfacht werden - haben Sie irgendwo gesehen (vorausgesetzt gültiges Markup) tr ohne table oder td ohne tr?Zumindest kann man redundanten Teil Kommentar wie:

   /* table tr */ td .class { 
       color: #ccf; 
   } 
   

2. Manchmal wie andere erwähnten Sie zusätzliche Spezifität benötigen, z.B. Ihre #elem sollte überall rot sein, außer in einem spezifischen Kontext von #content.

   #elem { 
       /* usually red */ 
       color: red; 
   } 
   
   #content #elem { 
       /* except when in specific context */ 
       color: black; 
   }