¿El selector de estrella en CSS afecta el rendimiento de la representación de la página?(¿por qué) se considera dañino el selector de estrella CSS?
¿hay alguna advertencia al usarlo?
* {
margin:0;
padding:0;
}
Cuando se trata de rendimiento, Steve Souders es la hombre:
cita Shameless de uno de los informes:
El La clave para optimizar los selectores de CSS es para enfocarse en el selector de la derecha , también llamado selector de llave (¿coincidencia?). Aquí hay un selector costoso mucho más : A.class0007 * {}. Aunque este selector puede parecer más simple, es más caro que el navegador coincida. Debido a que el navegador se mueve de derecha a izquierda, comienza por la comprobación de todos los elementos que coinciden con el selector de llave, “*”.Esto significa que el navegador debe intentar hacer coincidir este selector con todos los elementos en la página .
[el énfasis es mío negrita]
También cito "Está claro que los selectores de CSS con un selector de teclas que coincide con muchos elementos pueden ralentizar notablemente las páginas web". lectura interesante, gracias. – gpilotino
Me gusta más esta cita "En base a estas pruebas, tengo la siguiente hipótesis: para la mayoría de los sitios web, las posibles ganancias de rendimiento de la optimización de los selectores CSS serán pequeñas y no valdrá la pena". – arkanciscan
@arkanciscan esto es idd muy cierto. Optimizar los selectores CSS es probablemente uno de los mejores casos de optimización prematura. – anddoutoi
Desde que estoy usando la misma regla exacta en cada una de mis proyectos y ninguno tiene problemas graves de perfomance, diría: No, no es por lo que yo sé.
Una vista 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 el selector de estrellas HTML error que se aplica de la siguiente manera:
* html
Esto debe interpretarse como ninguna coincidencia elemento html porque es la raíz y no puede ser un elemento secundario. IE lo interpreta como html.
* * body
Una vez más, debe coincidir con ningún elemento porque el cuerpo no puede ser un elemento nieto - a pesar de que 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 de 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.
No lo llamaría error sino error del desarrollador en este caso – Jonathan
Para algunas propiedades, usar * puede producir resultados inesperados.
* { color: blue }
li { color: red }
Ahora dado <li><i>text</i></li>, ¡el texto será azul!
Sí, pero es posible que * no lo piense *, cuando configure las propiedades para '*'. Esto es más cierto con '*' y elementos o elementos de interfaz que rara vez usa. – Boldewyn
@ ApoY2K: simplemente porque funciona como debería, no significa que se espera. Cuando tienes un selector *, es fácil olvidarte de él. Y cuando lo recuerde, debe pensar ** cada vez que agregue un nuevo elemento ** para comprobar que no está aplicando estilos que no desea. – DisgruntledGoat
@ ApoY2k: claro, si eres perfecto y nunca cometes errores, nunca escribirás código que funcione de manera distinta a la esperada. De lo contrario, es razonable pensar que el color se hereda del padre, y así es como este texto que no sea rojo es inesperado. –
En qué contexto ha escuchado que es "perjudicial"? Cuando se usa de ciertas maneras, puede comportarse de manera diferente dependiendo del navegador (considere '* html {}' por ejemplo). – Blixt
también estoy pidiendo esto porque veo que los métodos de restablecimiento de css "de facto" evitan su uso. – gpilotino