CSS Nesting mejorado con `CSSNestedDeclarations`

• La especificación de CSS Nesting ahora incluye la interfaz CSSNestedDeclarations, lo que resuelve los problemas causados por el anidamiento
• Además, hay otras mejoras, como que las declaraciones que vienen después de una regla de estilo ya no se mueven hacia arriba
• Se aplica desde Chrome 130, Firefox Nightly 132 y Safari Technology Preview 204

Problemas de CSS Nesting antes de la introducción de CSSNestedDeclarations

• Existía un problema donde las declaraciones anidadas se comportaban de forma distinta a la esperada

.foo {  
  width: fit-content;  
  @media screen {  
    background-color: red;  
  }  
  background-color: green;  
}  

• En versiones anteriores a Chrome 130, background-color se aplicaba como red y no como green
• Después del parsing, la regla que realmente se aplicaba cambiaba de la siguiente manera

.foo {  
  width: fit-content;  
  background-color: green;  
  @media screen {  
    & {  
      background-color: red;  
    }  
  }  
}  

• background-color: green; se movía hacia arriba junto con otras declaraciones, y la CSSMediaRule anidada quedaba envuelta en una CSSStyleRule adicional que usa el selector &
• Esto ocurría porque el motor de CSS no podía distinguir entre las propiedades que aparecen al inicio de una regla de estilo y las que aparecen entre otras reglas

Solución - introducción de la interfaz CSSNestedDeclarations

• Para resolverlo, el grupo de trabajo de CSS introdujo la regla de declaraciones anidadas (nested declarations rule)
• Desde Chrome 130, las declaraciones anidadas consecutivas se envuelven automáticamente en una instancia de CSSNestedDeclarations
• Con esto, la posición de la declaración background-color: green puede mantenerse después de la declaración background-color: red
• CSSNestedDeclarations coincide con los mismos elementos y pseudoelementos que la regla de estilo padre, y su comportamiento de especificidad también es el mismo

Impacto para los desarrolladores

• Desde Chrome 130, CSS Nesting mejora de forma importante
• Sin embargo, si se mezclan declaraciones y reglas anidadas, puede ser necesario modificar el código

/* No funciona en Chrome 130 */  
#mypopover:popover-open {  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;   
  }  
  opacity: 1;  
  scale: 1;  
}  

• En el código anterior, la declaración @starting-style es sobrescrita por las declaraciones incluidas en CSSNestedDeclarations, por lo que se elimina la animación de entrada
• Debe corregirse de la siguiente manera

/* Funciona en Chrome 130 */  
#mypopover:popover-open {  
  opacity: 1;  
  scale: 1;  
  @starting-style {  
    opacity: 0;  
    scale: 0.5;  
  }  
}  

• Al usar CSS Nesting, poner las declaraciones anidadas por encima de las reglas anidadas funciona bien en la mayoría de las versiones de los navegadores

Detección de la función CSSNestedDeclarations

if (!("CSSNestedDeclarations" in self && "style" in CSSNestedDeclarations.prototype)) {  
  // No es compatible con CSSNestedDeclarations  
}  

Opinión de GN⁺

• CSS Nesting es una función útil que mejora la legibilidad y el mantenimiento del código. Sin embargo, existían problemas al mezclar reglas anidadas y declaraciones, y es una buena noticia que esto se haya resuelto con la introducción de CSSNestedDeclarations.
• Antes de que se introdujera CSSNestedDeclarations, había problemas como cambios en la posición de las declaraciones anidadas o sobrescrituras no intencionales. Esto podía causar confusión entre los desarrolladores.
• También se consideraron otras soluciones, como usar la regla @nest o envolver las declaraciones anidadas en CSSStyleRule, pero no se adoptaron por motivos como el deterioro de la experiencia de desarrollo. La introducción de la regla de declaraciones anidadas parece ser la solución más adecuada.
• Aun así, CSSNestedDeclarations todavía solo es compatible con algunos navegadores, así que para mantener compatibilidad entre navegadores parece más seguro colocar siempre las declaraciones anidadas por encima de las reglas anidadas.
• Los preprocesadores de CSS como PostCSS y Sass también ofrecen una funcionalidad similar a CSSNestedDeclarations. Si ya usas un preprocesador, puede valer la pena aprovechar esa función.