Speed ​​/ Redundanz von Selektoren in CSS [geschlossen]

Question

Hat jemand Informationen über Browser-Auswahlgeschwindigkeiten in CSS? Mit anderen Worten, wie verschiedene Selektoren miteinander vergleichen (in th gleichen Browser).

Zum Beispiel, ich sehe oft (und schreiben) Code wie folgt:

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

Aber da diese Elemente eindeutige IDs sind, sollte ich nur #elem brauchen, nicht wahr? Das hat mich darüber nachzudenken, ob vielleicht ist es schneller für Browser komplexere Selektoren zu haben -. Mein Denken ist, dass ein Browser #content finden könnte und wissen, nur in diesem Element zu suchen, wo sonst kein

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

Answer 1

Um ehrlich zu sein, Sie sprechen eine so kleine Menge an Zeit, die ich glaube nicht, dass es wirklich einen Unterschied macht.

Im Hinblick auf die spezifischeren Selektoren - ich denke, das ist eine gute Übung für ein paar Gründe:

1. Es verbessert die Lesbarkeit des Codes -. Auf einen Blick mehr sehen, wo Sie Selektoren in Bezug auf die HTML angewendet werden
2. Es reduziert die Wahrscheinlichkeit Ihrer Wähler woanders würde geschrieben werden mit noch mehr Spezifität als Selektor überschrieben werden, was sehr unwahrscheinlich ist.

Was Sie sprechen können einen Unterschied machen, wenn JavaScript-Bibliotheken wie jQuery verwenden - wie sie das gesamte Dokument selbst zu analysieren haben, aber ich habe sicher nie bemerkt, jede Geschwindigkeit Unterschiede mich.

Answer 2

hier einige Informationen, die ich habe nach kurzer Suche.

Answer 3

Es könnte ein Unterschied in der Geschwindigkeit, aber in seinem nicht den normalen Gebrauch Fall wahrnehmbaren in. Der wahre Grund für Ihre CSS zu schreiben wie die Spezifität ist. 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 4

Nicht ein weiser Mann zu sein, aber die Zeit, die Sie nahm diese Frage zu schreiben übersteigt wahrscheinlich die Summe aller Zeitersparnis aller Benutzer, die jemals Ihre Website (in Relation # id2 vs # ID2 #ID) besuchen . Das Gleiche gilt für die Zeit, diese Antwort zu schreiben ....

Sie können mich überstimmen jetzt:)

Answer 5

Mozillas Richtlinien könnten interessant sein.

Answer 6

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

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

2. Manchmal wie andere erwähnen Sie zusätzliche Spezifität benötigen, z.B. Ihre #elem überall außer im spezifischen Kontext der #content rot werden sollten.

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