Anidamiento nativo de CSS

El anidamiento nativo de CSS (línea base de 2024, disponible en todos los navegadores modernos) permite escribir reglas CSS dentro de otras reglas, reproduciendo la sintaxis de anidamiento que antes solo estaba disponible en los preprocesadores Sass/Less. Las reglas anidadas heredan automáticamente el contexto del selector padre.

Escriba los selectores secundarios dentro del bloque de una regla padre. El navegador combina automáticamente los selectores padre y secundario. Un & (selector de anidamiento) hace referencia explícita al selector padre para modificadores y pseudoclases.

& representa explícitamente el selector padre en las reglas anidadas. Úselo para pseudoclases (&:hover), pseudoelementos (&::before), clases modificadoras (&.active) y selectores de atributos (&[disabled]). Sin &, las reglas anidadas crean selectores descendientes.

Anide las reglas de los pseudoelementos de forma natural dentro del elemento padre: .button { &::before { content: ""; } &::after { content: ""; } }. Así, todos los estilos del botón quedan agrupados en un mismo lugar y se evita repetir el selector, como es necesario en CSS plano.

Las consultas de medios y otras reglas at se pueden anidar dentro de las reglas (Chrome 112+, Firefox 117+): .card { padding: 1rem; @media (min-width: 768px) { padding: 2rem; } }. Los estilos adaptables permanecen junto al elemento al que afectan, en lugar de estar en un bloque independiente de consulta de medios al final del archivo.

El anidamiento no cambia las reglas de especificidad: el selector combinado tiene la misma especificidad que tendría si se escribiera de forma plana. .card .title, escrito de forma anidada o plana, tiene la misma especificidad (0,2,0). El anidamiento es una comodidad sintáctica, no un cambio en la especificidad.

Un selector anidado sin & crea un selector descendiente: .card { .title {} } se compila como .card .title. Con &: .card { &.active {} } se compila como .card.active (sin espacio: es una clase modificadora, no un descendiente).

El anidamiento nativo no es ideal para BEM: los selectores .block__element y .block--modifier son cadenas, y el anidamiento no puede construirlos usando solo &. Use el anidamiento para pseudoclases y estructuras de componentes anidadas, no para concatenar cadenas de BEM (lo que todavía requiere un preprocesador).

La mayor parte de la sintaxis de anidamiento de Sass es idéntica a la del anidamiento nativo de CSS. La excepción es que Sass permite la concatenación de cadenas con &-modifier, mientras que CSS nativo no. Para migrar, busque patrones como &- o &__ y convierta en planas esas reglas concretas, manteniendo el resto del anidamiento.

El anidamiento nativo de CSS es compatible con Chrome 112+, Firefox 117+ y Safari 16.5+. Para admitir navegadores antiguos, use PostCSS con postcss-nesting a fin de transformar la sintaxis de anidamiento nativo en CSS plano durante la compilación, lo que permite escribir hoy con anidamiento nativo.

Chrome DevTools muestra las reglas anidadas en el panel Styles con su forma anidada. Al hacer clic en una regla anidada, se accede a la ubicación correcta del código fuente en el panel Sources. Depurar CSS anidado es tan claro como depurar CSS plano en las versiones modernas de DevTools.

¿Cuál es la diferencia entre anidar con el selector & y hacerlo sin él?

El anidamiento nativo de CSS permite usar una sintaxis anidada similar a la de Sass en CSS plano. El selector & crea selectores compuestos para pseudoclases, pseudoelementos y modificadores. Las consultas @media anidadas mantienen los estilos adaptables junto a sus elementos. PostCSS transforma el anidamiento nativo para los navegadores antiguos, lo que permite adoptarlo gradualmente desde hoy.