css: ¿utiliza el selector universal '*' frente a html o el selector de cuerpo?

La aplicación de estilos a la etiqueta del cuerpo se aplicará a toda la página, por lo que

body { font-family: Verdana }

se aplicará a toda la página. Esto también podría hacerse con

* {font-family: Verdana} 

que se aplicaría a todos los elementos y, por lo tanto, parecería tener el mismo efecto.

Entiendo el principio de que, en primera instancia, el estilo se aplica a una etiqueta, cuerpo para toda la página, mientras que en el segundo ejemplo, la fuente se aplica a cada elemento html individual. Lo que pregunto es cuál es la diferencia práctica al hacer eso, cuáles son las implicaciones y cuál es la razón, la situación o la mejor práctica que lleva a usar uno sobre otro.

Un efecto secundario es sin duda la velocidad (+1 Rob). Estoy más interesado en la razón real para elegir uno sobre el otro en términos de funcionalidad.

Diferencias funcionales entre estas dos opciones de selector CSS ... (mi opinión)

cuerpo

• Aplica propiedades de estilo al elemento del cuerpo.
• Los elementos dentro del cuerpo pueden heredar los valores de propiedad. Algunas propiedades tienen por defecto 'heredar'.
• Las declaraciones de estilo que coinciden con un elemento dentro del cuerpo pueden anular el estilo heredado.

El selector universal * (todos los elementos)

• Aplica propiedades de estilo a todos los elementos individuales.
• Reemplaza las propiedades de estilo heredadas y los 'valores iniciales' predeterminados. Bloquea la herencia.
• Otros selectores css más específicos que coinciden con un elemento reemplazarán las propiedades de estilo aplicadas por *.

Sugerencias

1. Use el cuerpo para las propiedades de estilo que heredan de manera predeterminada, como la fuente, el color, para proporcionar un valor predeterminado sensible para los elementos, reduciendo la necesidad de codificar explícitamente para cada caso y preservando la capacidad de los elementos contenidos en los niveles inferiores debajo del cuerpo para heredar de sus padres.
2. Probablemente sea mejor no usar el Selector universal * en este caso. Interrumpe la herencia entre otros elementos dentro del cuerpo y puede obligarlo a escribir más reglas CSS para compensar. Puede ser un factor en la disminución de la representación de páginas. Esto depende del tamaño y el contenido de la página y de cuántas reglas CSS hay.

Intenta algo como esto

body { font-family: Verdana }
table { font-family: Arial }

en contra

* { font-family: Verdana }
table { font-family: Arial }

Y vea qué estilos se aplican a las celdas de la tabla.

Hay una diferencia entre "aplicado a todo el documento" y "aplicado a cada elemento del documento" cuando se trata de hojas de estilo en cascada .

Al aplicar un estilo en cascada al cuerpo, se aplica a todas las etiquetas dentro del cuerpo hasta que una etiqueta lo sobrescribe. Luego, el estilo sobrescrito se aplica a todas las etiquetas dentro de esa.

Sin embargo, hay algunos estilos que no caen en cascada, como el margen y el relleno (generalmente donde no tiene sentido). Esos solo se pueden aplicar a etiquetas específicas y ahí es donde un comodín puede ser útil (aunque rara vez).

La mayoría de los estilos no en cascada también tienen un valor de herencia (p. Ej. margin: inherit), Que significa "tomar los valores de la etiqueta principal".

He olvidado los detalles completos pero, con el selector *, el rendimiento se ralentiza a medida que se evalúa cada elemento a medida que el navegador analiza el CSS y aplica el estilo. iirc, establecer la fuente, en este caso, solo para el padre hace una referencia para cada elemento y no se necesita trabajo adicional.

También hay otros problemas, pero, una vez más, no los recuerdo todos y no los he usado * en años.

La pauta general para un buen diseño de CSS es ser lo más específico posible, pero no más.

Entonces, en su ejemplo, aplicar el estilo al elemento del cuerpo sería lo más específico posible y ciertamente más específico que el selector '*'.

Como otros han mencionado, body { font-family: Verdana }seleccionará la fuente Verdena solo para aquellos elementos que hereden la font-stylepropiedad de sus padres, de modo que todos sus padres también hereden la propiedad eventualmente del bodyelemento, y * {font-family: Verdana}seleccionará la fuente Verdena para todos los elementos. Me gustaría ilustrar la diferencia con un ejemplo:

Usando el selector de cuerpo:

body 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Not Courier :("> 
</form>

Usando el selector universal *:

* 
{ 
font-family: courier;
}

<p> This is paragraph with courier font </p>
<form>
<label for="X">Please type inside me: </label><input type="text" naem="X" value="Courier :)"> 
</form>

Use los códigos css y html de los ejemplos que reconocerá que el <input>elemento no hereda el estilo de fuente en absoluto y, por lo tanto, lo que escriba en el formulario obtiene el estilo de fuente predeterminado de la hoja de estilo de agente de usuario. En el segundo ejemplo, el selector universal *establece explícitamente el estilo de fuente para cada elemento, incluido el inputelemento.