Info Uso del selector universal (*)
Cuándo el selector * es una herramienta de reset razonable frente a una señal de alerta de rendimiento y especificidad, y cómo delimitarlo con seguridad.
El validador marca selectores que usan * más de una vez, o que lo combinan con algo más en vez de usarlo solo.
Ejemplo
/* Común, está bien: un reset de box-sizing */
* { box-sizing: border-box; }
/* Marcado: selector universal combinado con un descendiente */
.container * { margin: 0; }Por qué importa
Un * a secas, usado para algo como un reset de box-sizing, es un patrón bien establecido y razonable — el validador no marca ese caso. Lo que sí marca es el selector universal apareciendo más de una vez, o combinado con un combinador descendiente como .container *, que coincide con cada uno de los elementos descendientes sin importar tipo o profundidad. Eso es costoso de emparejar para el navegador contra un DOM grande, y hace que los estilos resultantes sean difíciles de razonar, ya que no hay forma de saber solo con el selector qué elementos están realmente afectados.
Frequently asked questions
¿* { box-sizing: border-box; } es mala práctica?
No — es un reset ampliamente usado y deliberado que se aplica una vez al inicio de una hoja de estilos, y no es lo que esta revisión advierte. La preocupación son los selectores universales combinados con otros selectores o usados repetidamente, que abarcan una red mucho más amplia e impredecible.
¿Cuál es una alternativa más dirigida a .container *?
Apuntar a los elementos o tipos hijos específicos que realmente se necesitan — una clase en los elementos que necesitan el estilo, o un combinador de hijo directo (.container > *) si se quiere decir específicamente hijos inmediatos en vez de cada descendiente a cualquier profundidad.