selectores - selector de hijos css

¿El selector de estrella CSS se considera perjudicial(y por qué)?

Question

¿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;
}

Answer 1

Como uso la misma regla en todos mis proyectos y ninguno tiene problemas graves de rendimiento, les digo: no, hasta donde yo sé.

Answer 2

Cuando se trata de rendimiento, Steve Souders es el hombre:

• Repercusión en el rendimiento de los selectores de CSS
• Simplificando Selectores de CSS

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]

Answer 3

Para algunas propiedades, el uso de * puede producir resultados inesperados.

* { color: blue }
li { color: red }

Ahora, dado <li><i>text</i></li> , ¡el texto será azul!

Answer 4

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 aumentar 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.