Adicionando estilos a camadas

Você pode adicionar estilos a uma camada em linha (dentro de um bloco @layer) ou por meio de @import (para atribuir uma folha de estilos importada a uma camada).

Envolva as regras em um bloco @layer com o nome da camada:

Você pode adicionar conteúdo a uma camada em vários blocos @layer separados. Todas as declarações são mescladas na camada:

Um bloco @layer sem nome cria uma camada anônima. As camadas anônimas não podem receber adições posteriormente e existem na posição em que aparecem:

Atribua uma folha de estilos importada inteira a uma camada:

Em um projeto modular, cada arquivo de componente adiciona conteúdo à camada de componentes:

Tanto Sass quanto PostCSS funcionam junto com @layer. Você pode definir camadas no arquivo de entrada principal e usar @use ou @import para incluir parciais de componentes que adicionam conteúdo a essas camadas.

Os estilos em linha (atributo style="") não são afetados pelas camadas; eles sempre vencem os estilos de qualquer camada. Somente regras de folhas de estilos (incluindo blocos <style>) podem ser colocadas em camadas.

O Chrome DevTools exibe os limites das camadas no painel Estilos. As regras de uma camada de menor prioridade que são substituídas por uma camada superior aparecem tachadas, com a camada vencedora identificada.

Os navegadores que não oferecem suporte a @layer tratam todos os blocos @layer como blocos CSS comuns (eles renderizam tudo). O comportamento da cascata é diferente, mas os estilos não são perdidos. Por segurança, envolva o código dependente do recurso em @supports (@layer selector).

Estratégia de migração:

1. Declare as camadas no início do seu arquivo CSS principal
2. Envolva cada seção CSS existente no bloco da camada correspondente
3. Teste e corrija quaisquer problemas de prioridade que surgirem
4. Com o tempo, remova seletores desnecessários de alta especificidade

Como adicionar estilos de vários blocos @layer separados à mesma camada nomeada?

Adicione estilos às camadas usando blocos nomeados @layer name { }, que podem ser divididos entre arquivos e serão todos mesclados. Atribua folhas de estilos importadas a camadas com @import layer(). As camadas anônimas não podem ser reabertas. Os estilos em linha sempre substituem os estilos declarados em camadas.