Vitesse / redondance des sélecteurs en CSS [fermé]

Question

Quelqu'un at-il des informations sur les vitesses de sélecteur de navigateur en CSS? En d’autres termes, comment différents sélecteurs se comparent-ils (dans le même navigateur).

Par exemple, je vois souvent (et écris) un code comme celui-ci:

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

Mais comme ces éléments sont des identifiants uniques, je n’aurais besoin que de #elem , non? Cela m'a amené à réfléchir à la question de savoir s'il était peut-être plus rapide pour les navigateurs de disposer de sélecteurs plus complexes. Je pensais qu'un navigateur pourrait trouver # contenu et savoir ne regarder que dans cet élément, nulle part ailleurs.

Un autre exemple pourrait être table tr td .class vs table .class

Answer 1

Pour être honnête, vous parlez si peu de temps que je ne pense pas que cela fasse vraiment une différence.

En ce qui concerne l’utilisation de sélecteurs plus spécifiques, je pense que c’est une bonne pratique pour deux raisons:

1. Cela améliore la lisibilité du code. En un coup d'œil, vous pouvez en savoir plus sur les sélecteurs appliqués au HTML.
2. Cela réduit la probabilité que vos sélecteurs soient écrasés ailleurs, car un sélecteur avec encore plus de spécificité aurait été écrit, ce qui est très peu probable.

Ce dont vous parlez peut faire la différence lors de l’utilisation de bibliothèques JavaScript telles que jQuery, car ils doivent analyser eux-mêmes le document dans son intégralité, mais je n’ai certainement jamais remarqué de différence de vitesse.

Answer 2

Voici quelques informations que j'ai obtenues après une recherche rapide.

Answer 3

Il peut y avoir une différence de vitesse mais elle n’est pas perceptible dans aucun cas d’utilisation normale. La vraie raison d'écrire votre CSS comme ça, c'est la spécificité. C'est si vous avez

#content #elem {color: black;} 

et

#elem {color: red;}

L'élément doit être coloré en noir car c'est la règle la plus spécifique.

Answer 4

Ce n’est pas sage, mais le temps qu’il vous a fallu pour écrire cette question dépasse probablement la somme de tous les gains de temps de tous les utilisateurs qui visiteront votre site (par rapport à #id # id2 vs # id2) . Il en va de même pour le temps d'écrire cette réponse ....

vous pouvez me voter maintenant:)

Answer 5

Les Les consignes de Mozilla pourraient être intéressantes.

Answer 6

1. Il y a toujours un choix entre efficacité et lisibilité. Bien sûr, table tr td .class est plus lisible, mais très inefficace et peut être simplifié - avez-vous vu n'importe où (en supposant une balise valide) tr sans table ou td sans tr ? Au moins, vous pouvez commenter une partie redondante du type:

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

2. Parfois, comme d'autres l'ont mentionné, vous avez besoin d'une spécificité supplémentaire, par exemple. votre #elem doit être rouge partout sauf dans un contexte spécifique de #content .

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