Declaración y orden de @layer

Las capas de cascada de CSS (@layer) proporcionan un mecanismo para controlar explícitamente la prioridad de las reglas CSS en la cascada, independientemente de la especificidad. Las capas de menor prioridad pierden incluso cuando tienen selectores con mayor especificidad.

Sin capas, todas las reglas CSS compiten mediante la especificidad y el orden de origen. Esto provoca guerras de especificidad cuando los estilos de restablecimiento, de componentes y de utilidades compiten por la prioridad. Las capas proporcionan a cada grupo una prioridad fija y predecible.

Declare las capas de antemano en una sola instrucción. El orden de declaración determina la prioridad: las capas posteriores prevalecen sobre las anteriores.

La declaración @layer debe estar al principio de la hoja de estilos (o del archivo principal de importación). Puede añadir estilos a las capas en cualquier orden después de la declaración; la prioridad viene determinada por el orden de declaración, no por el lugar donde se añadan los estilos.

Como la prioridad de las capas se determina en el momento de la declaración, puede añadir estilos a una capa en cualquier lugar, incluso antes de que se haya declarado, mediante una referencia anticipada. Lo que importa es el orden declarado.

Una declaración de una capa posterior siempre prevalece sobre una declaración de una capa anterior, independientemente de la especificidad:

Los estilos situados fuera de cualquier capa se denominan sin capa. Tienen la prioridad más alta, incluso por encima de la última capa declarada. Úselos para anulaciones de emergencia que deban prevalecer siempre.

Orden completo de prioridades (de mayor a menor para los estilos del autor):

1. Estilos sin capa (fuera de cualquier @layer)
2. Última capa declarada (por ejemplo, utilities)
3. Penúltima capa (por ejemplo, components)
4. Capas anteriores (base, reset)

!important en las capas puede resultar complejo: invierte el orden de las capas para esa declaración. !important en la capa más antigua prevalece sobre !important en las capas posteriores. Esto coincide con el comportamiento original de la cascada para los estilos de usuario frente a los del autor.

Las capas se pueden anidar mediante la notación de puntos:

Una configuración de capas realista para un proyecto:

Las capas se declaran como: @layer base, components, utilities. ¿Los estilos de qué capa prevalecen en un conflicto?

@layer establece capas de cascada ordenadas explícitamente. Declare los nombres de las capas en orden de prioridad, de menor a mayor. Las capas posteriores siempre prevalecen sobre las anteriores, independientemente de la especificidad. Los estilos sin capa tienen la prioridad más alta. !important invierte el orden de prioridad de las capas para esa declaración.