¿Se considera dañino el selector de estrellas CSS (y por qué)?

Resuelto gpilotino asked hace 15 años • 4 respuestas

¿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;
}
gpilotino avatar Nov 11 '09 16:11 gpilotino
Aceptado

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]

anddoutoi avatar Nov 11 '2009 10:11 anddoutoi

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!

 avatar Nov 11 '2009 10:11

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.

Pete OHanlon avatar Nov 11 '2009 09:11 Pete OHanlon

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.

F.P avatar Nov 11 '2009 09:11 F.P