Declaração e ordenação de @layer

As camadas da cascata de CSS (@layer) fornecem um mecanismo para controlar explicitamente a prioridade das regras CSS na cascata, independentemente da especificidade. Camadas de menor prioridade perdem mesmo quando têm seletores de maior especificidade.

Sem camadas, todas as regras CSS competem usando a especificidade e a ordem de origem. Isso leva a disputas de especificidade quando estilos de redefinição, componentes e utilitários competem pela prioridade. As camadas atribuem a cada grupo uma prioridade fixa e previsível.

Declare as camadas antecipadamente em uma única instrução. A ordem da declaração determina a prioridade: as camadas posteriores vencem as anteriores.

A declaração @layer deve ficar no início da sua folha de estilos (ou do arquivo principal de importação). Você pode adicionar estilos às camadas em qualquer ordem depois da declaração; a prioridade é determinada pela ordem da declaração, não pelo local onde os estilos são adicionados.

Como a prioridade da camada é determinada no momento da declaração, você pode adicionar estilos a uma camada em qualquer lugar, até mesmo antes de ela ser declarada, fazendo uma referência antecipada. O que importa é a ordem declarada.

Uma declaração em uma camada posterior sempre vence uma declaração em uma camada anterior, independentemente da especificidade:

Os estilos colocados fora de qualquer camada são chamados de estilos sem camada. Eles têm a maior prioridade, até mesmo acima da última camada declarada. Use-os para substituições de emergência que devem sempre vencer.

Ordem completa de prioridade (da maior para a menor, para estilos do autor):

1. Estilos sem camada (fora de qualquer @layer)
2. Última camada declarada (por exemplo, utilitários)
3. Penúltima camada (por exemplo, componentes)
4. Camadas anteriores (base, redefinição)

O !important nas camadas é complexo: ele inverte a ordem das camadas para essa declaração. O !important na camada mais antiga vence o !important nas camadas posteriores. Isso corresponde ao comportamento original da cascata para estilos do usuário e do autor.

As camadas podem ser aninhadas usando a notação com pontos:

Uma configuração realista de camadas para um projeto:

As camadas são declaradas como: @layer base, components, utilities. Os estilos de qual camada vencem em um conflito?

@layer estabelece camadas da cascata em uma ordem explícita. Declare os nomes das camadas na ordem de prioridade, começando pela menor. As camadas posteriores sempre vencem as anteriores, independentemente da especificidade. Os estilos sem camada têm a maior prioridade. !important inverte a ordem de prioridade das camadas para essa declaração.