¿Se considera dañino el selector de estrellas CSS (y por qué)?
¿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 indicado:
- Impacto en el rendimiento de los selectores CSS
- Simplificando los selectores CSS
Cita descarada de uno de los informes:
La clave para optimizar los selectores CSS es centrarse en el selector más a la derecha , también llamado selector de clave (¿coincidencia?). Aquí hay un selector mucho más caro: A.class0007 * {}. Aunque este selector puede parecer más simple, es más caro de igualar para el navegador. Debido a que el navegador se mueve de derecha a izquierda , comienza verificando todos los elementos que coinciden con el selector de clave, "*". Esto significa que el navegador debe intentar hacer coincidir este selector con todos los elementos de la página.
[el énfasis en negrita es mío]
Para algunas propiedades, el uso *
puede producir resultados inesperados.
* { color: blue }
li { color: red }
¡ Ahora dado <li><i>text</i></li>
, el texto será azul!
Una opinión es que no se trata tanto de que el * sea un problema de rendimiento, sino de ese viejo favorito: hay un problema de IE. Afecta a IE 5, 5.5 y 6, así como a las variantes de Macintosh. Básicamente, hay algo llamado error del selector de estrellas HTML que se aplica de la siguiente manera:
* html
Esto debe interpretarse como que no hay coincidencia de elementos porque html es raíz y no puede ser un elemento secundario. IE interpreta esto como html.
* * body
Nuevamente, no debe coincidir con ningún elemento porque el cuerpo no puede ser un elemento nieto, aunque sea un elemento hijo de HTML. IE interpreta esto como * cuerpo.
* html body
Esto no debería coincidir con ningún elemento, pero IE lo interpreta como un cuerpo html.
El lado del rendimiento generalmente se considera que aplicar * solo significa que el estilo se aplica a cada elemento de una página. Rara vez encuentro que esto sea un problema en sí mismo: el punto en el que se convertiría en un problema significa que probablemente tengas demasiado margen de beneficio de todos modos. De manera similar, como se aplica a todo, significa que necesitas aumentar tu código para hacer frente a elementos que no deberían tener ese estilo. Como ocurre con todo lo demás, depende de usted decidir cuáles deben ser las compensaciones y el equilibrio.
Dado que estoy usando exactamente la misma regla en cada uno de mis proyectos y ninguno tiene problemas graves de rendimiento, diría: No, que yo sepa, no.