¿El selector de estrellas en CSS afecta el rendimiento de representación de la página?
¿Hay alguna advertencia al usarlo?
* { margin:0; padding:0; } Cuando se trata de rendimiento, Steve Souders es el hombre:
Cita desvergonzada de uno de los informes:
La clave para optimizar los selectores CSS es enfocarse en el selector situado más a la derecha , también llamado selector de teclas (¿coincidencia?). Aquí hay un selector mucho más caro: A.class0007 * {}. Aunque este selector puede parecer más simple, es más costoso para el navegador. Como el navegador se mueve de derecha a izquierda , comienza por verificar todos los elementos que coinciden con el selector de teclas, “*”. Esto significa que el navegador debe intentar hacer coincidir este selector con todos los elementos de la página.
[audaz énfasis mío]
Para algunas propiedades, el uso de * puede producir resultados inesperados.
* { color: blue } li { color: red }
Ahora, dado
, ¡el texto será azul!
Una opinión es que no es tanto que * sea un problema de rendimiento, es un buen viejo favorito, hay un problema de IE con él. Afecta a IE 5, 5.5 y 6, así como a las variantes de Macintosh. Básicamente, hay algo llamado error del selector de estrella HTML que se aplica de la siguiente manera:
* html
Esto debe interpretarse como ninguna coincidencia de elemento porque html es raíz y no puede ser un elemento secundario. IE lo interpreta como html.
* * body
Nuevamente, no debe coincidir con ningún elemento porque el cuerpo no puede ser un elemento nieto, aunque es un elemento secundario de HTML. IE interpreta esto como * cuerpo.
* html body
Esto no debe coincidir con ningún elemento, pero IE lo interpreta como un cuerpo html.
El lado del rendimiento generalmente se trata de aplicar * solo significa que el estilo se aplica a cada elemento en una página. Raramente encuentro que esto es un problema en sí mismo: el punto en el que se convertiría en un problema significa que probablemente de todos modos tienes demasiado margen de beneficio. Del mismo modo, como se aplica a todo, significa que necesita boost su código para hacer frente a los elementos que no deberían tener ese estilo. Como con todo lo demás, depende de usted decidir cuáles deberían ser las compensaciones y el equilibrio.
Como uso la misma regla en todos mis proyectos y ninguno tiene problemas graves de rendimiento, les digo: no, hasta donde yo sé.