Pour savoir pourquoi ne pas utiliser * et pourquoi > est génial, il est important de comprendre comment le CSSDOM est fait.
Lorsque vous avez un sélecteur, disons div p .someclass, le navigateur doit effectuer une pile de vérifications.
D’abord, il va rassembler chaque élément avec .someclass. Il s’agit d’une opération assez facile. Il va ensuite vérifier tous les parents de tous les .someclasses qu’il a rassemblés et voir s’il a un parent p, en écartant ceux qui n’en ont pas. Ensuite, il vérifiera tous les parents de toutes ces balises p qui avaient des enfants .someclass qu’il a rassemblés à nouveau pour trouver des parents div. C’est ainsi qu’il détermine où il en est. Donc, bien sûr, si vous aviez pu simplement utiliser .specific-someclass, cela aurait été beaucoup moins coûteux.
C’est là que la valeur de > entre en jeu. Si vous avez div > p > .someclass, lorsque le navigateur vérifie les p parents de .someclass, il peut s’arrêter tout de suite. Il n’a besoin de remonter qu’un seul niveau. Beaucoup moins coûteux ! Essayez de toujours utiliser le sélecteur descendant direct lorsque cela est possible, même si ce n’est pas nécessaire.
Chaque fois qu’un * apparaît, le navigateur devra rassembler chaque élément de la page. C’est une tâche coûteuse, il est donc préférable de l’éviter. S’il s’agit d’un #some-very-specific-id *, la première chose que fera le navigateur sera de rassembler chaque élément, puis de vérifier chaque élément pour voir lesquels ont #some-very-specific-id comme ancêtre. Chaque élément sanglant de la page est vérifié. Bad juju.
Apologies si mes informations sont périmées. Cela fait longtemps que je n’ai pas eu à connaître quoi que ce soit sur la peinture CSS.