Warning Múltiples selectores de id en una regla
Por qué encadenar varios selectores #id crea CSS frágil y demasiado específico, difícil de anular, y qué usar en su lugar.
El validador advierte cuando un solo selector usa más de un #id, por ejemplo #sidebar #widget-3.
Ejemplo
/* Marcado: dos ids encadenados */
#sidebar #widget-3 { padding: 1rem; }
/* Generalmente más claro */
.sidebar .widget { padding: 1rem; }Por qué importa
Los selectores de id cargan una especificidad muy alta en la cascada de CSS — mucho más alta que una clase — así que una regla que encadena dos o más ids se vuelve extremadamente difícil de anular después sin recurrir a !important o a un selector igual de específico (o más). Como un elemento solo puede tener un id de todos modos, encadenar ids también suele significar que se podría haber apuntado al elemento directamente con un selector único y más simple, o haber usado clases para cualquier cosa pensada para reutilizarse o anularse.
Frequently asked questions
¿Usar selectores de id en CSS siempre es malo?
No siempre — un solo selector de id está bien para un elemento genuinamente único. El problema aquí específicamente es encadenar varios ids juntos, lo cual acumula especificidad innecesariamente y suele indicar que el selector se podría simplificar.
¿Qué debería usar en su lugar para estilos reutilizables?
Clases. Cargan una especificidad más baja y predecible, se pueden aplicar a cualquier cantidad de elementos, y son el bloque de construcción estándar para CSS reutilizable.