Añadir estilos a las capas

Puede añadir estilos a una capa directamente (dentro de un bloque @layer) o mediante @import (para asignar una hoja de estilos importada a una capa).

Incluya las reglas dentro de un bloque @layer con el nombre de la capa:

Puede añadir elementos a una capa en varios bloques @layer independientes. Todas las declaraciones se combinan en la capa:

Un bloque @layer sin nombre crea una capa anónima. Las capas anónimas no se pueden ampliar posteriormente y permanecen en la posición en la que aparecen:

Asigne una hoja de estilos importada completa a una capa:

En un proyecto modular, cada archivo de componente añade elementos a la capa components:

Tanto Sass como PostCSS funcionan junto con @layer. Puede definir las capas en el archivo de entrada principal y usar @use o @import para incluir parciales de componentes que añadan elementos a esas capas.

Los estilos en línea (atributo style="") no se ven afectados por las capas: siempre prevalecen sobre los estilos de cualquier capa. Solo las reglas de las hojas de estilos (incluidos los bloques <style>) se pueden colocar en capas.

Chrome DevTools muestra los límites de las capas en el panel Styles. Las reglas de una capa de menor prioridad que una capa superior ha anulado aparecen tachadas, y se identifica la capa que prevalece.

Los navegadores que no admiten @layer tratan todos los bloques @layer como bloques CSS estándar (renderizan todo). El comportamiento de la cascada es diferente, pero no se pierden los estilos. Para mayor seguridad, incluya el código que dependa de esta funcionalidad en @supports (@layer selector).

Estrategia de migración:

1. Declare las capas al principio del archivo CSS principal
2. Incluya cada sección CSS existente en el bloque de su capa correspondiente
3. Pruebe y corrija los problemas de prioridad que surjan
4. Con el tiempo, elimine los selectores innecesarios con alta especificidad

¿Cómo se añaden estilos de varios bloques @layer independientes a la misma capa con nombre?

Añada estilos a las capas mediante bloques con nombre @layer name { }, que se pueden dividir entre varios archivos y se combinarán. Asigne hojas de estilos importadas a capas con @import layer(). Las capas anónimas no se pueden volver a abrir. Los estilos en línea siempre prevalecen sobre los estilos declarados en capas.