Performance et sélecteurs CSS

Bonjour à tous,

Pouvez-vous me dire si niveau performance / best practices il vaut mieux :

- utiliser des sélecteurs CSS3 (nth-child, first-of-type, not, ...);
- utiliser tant que possible des class et des id;
- ça ne changera rien.

Je me doute que sur quelques sélecteur ça ne changera pas grand chose mais si le site ou l'application est assez lourd(e) avec des transformations 3d, animations, vidéos de background et tout ce qui ce fait aujourd'hui, je suppose que ça peut avoir un réel impact...

Je ne parle pas du tout de la compatibilité mais vraiment de la manière la plus propre / rapide.

Avez-vous un avis sur la question ?

Merci pour vos réponses.

Yordi

salut,
je crois que tu mélanges beaucoup de choses. Je ne pense pas qu'il y ait un lien entre les sélecteurs et la lourdeur d'un site, ce sont deux choses qui n'ont rien à voir.
Cependant, côté performances des sélecteurs, plus tu cibles un élément d'une manière directe et mieux c'est.

#element {}

sera meilleur que

body>section div>ul {}

en supposant que l'élément ciblé est un <ul>.
Mais ce n'est pas pour autant qu'on mettra des ID partout. On peut les placer sur les éléments principaux et recourir à des sélecteur courts dans le genre

#parent ul {}

Ça restera de l'ordre des microperformances mais il vaudra plus garder un code lisible et propre.

Pour les performances côté transformations et animations, on va encore sur autre chose. Animer des éléments qui sortent du flux par exemple, offrira de meilleurs résultats car tu éviteras au navigateur de réorganiser à chaque fois l'ensemble des éléments qui entourent celui que tu animes.