Info Cadenas de selectores largas y profundas
Por qué cadenas largas de combinadores descendientes como .a .b .c .d .e hacen el CSS frágil, difícil de mantener y más lento de emparejar.
El validador marca selectores con cuatro o más combinadores (espacios, >, + o ~) encadenados, como un aviso informativo para reconsiderar la estructura.
Ejemplo
/* Marcado: cinco niveles de profundidad */
.page .sidebar .widget .list .item { color: gray; }
/* Más simple y más resistente a cambios en el markup */
.widget-item { color: gray; }Por qué importa
Una cadena larga de descendientes ata el CSS de forma estrecha a una estructura HTML específica — reorganiza el markup aunque sea levemente (envolver algo en un <div> extra, por ejemplo) y el selector deja de coincidir. Las cadenas profundas también acumulan especificidad, lo cual agrega los mismos problemas de anulación que los selectores de id encadenados, y sencillamente son más difíciles de leer y depurar que una sola clase bien nombrada aplicada directamente al elemento que necesita el estilo.
Frequently asked questions
¿Qué tan profundo es demasiado profundo?
No hay una regla estricta, pero como guía práctica, la mayoría del CSS mantenible rara vez necesita más de dos o tres combinadores. Si se están encadenando cuatro o más, suele ser señal de que al elemento objetivo se le podría dar su propia clase en su lugar.
¿Esto aplica a metodologías CSS como BEM?
BEM (Block__Element--Modifier) es esencialmente una convención de nombres diseñada para evitar este problema — favorece selectores planos de una sola clase en vez de anidamiento profundo, que es exactamente la dirección hacia la que apunta esta advertencia.