Para saber por qué no usar *
y por qué >
es genial, es importante entender cómo se hace el CSSDOM.
Cuando tienes un selector, digamos div p .someclass
, el navegador necesita realizar un montón de comprobaciones.
Primero, recogerá cada elemento con .someclass
. Esta es una operación bastante fácil. Luego, comprobará todos los padres de todos los .someclass
es que reunió y verá si tiene un padre p
, descartando los que no lo tienen. A continuación, comprobará todos los padres de todas esas etiquetas p que tenían hijos .someclass
que ha reunido de nuevo para los padres div
. Así es como calcula su posición. Así que, por supuesto, si usted podría haber utilizado .specific-someclass
, que habría sido mucho menos costoso.
Aquí es donde entra el valor de >
. Si tiene div > p > .someclass
, cuando el navegador busca p
padres de .someclass
, puede detenerse de inmediato. Sólo necesita atravesar un nivel hacia arriba. Mucho menos costoso. Intente utilizar siempre el selector descendente directo cuando sea posible, aunque no sea necesario.
Cuando aparezca un *
, el navegador tendrá que recoger todos los elementos de la página. Esta es una tarea costosa, por lo que es mejor evitarla. Si es #some-very-specific-id *
, lo primero que hará el navegador es recoger todos los elementos y luego comprobar cada elemento para ver cuáles tienen #some-very-specific-id
como antecesor. Cada maldito elemento de la página está siendo revisado. Mala suerte.
Disculpas si mi información no está actualizada. Ha pasado mucho tiempo desde que tuve que saber algo sobre la pintura CSS.