@layer

@layer nome-da-camada {regras}
@layer nome-da-camada;
@layer nome-da-camada, nome-da-camada, nome-da-camada;
@layer {regras}

Sendo que:

nome-da-camada

Define o nome da sua camada de cascata.

regras

São as regras CSS utilizadas dentro da camada.

Adicionar regras CSS numa camada de cascata possibilita aos desenvolvedores web um controle maior sobre a cascata. Qualquer estilo fora de uma camada são agrupados numa camada anônima posicionada após todas as camadas declaradas, nomeadas ou anônimas. Isso significa que quaisquer estilos declarados fora de uma camada vão sobrescrever os estilos declarados em camadas, seja qual for seu grau de especificidade.

Podemos criar uma camada de cascata com a regra at @layer de três maneiras.

A primeira é criando uma camada de cascata nomeada, inserindo as regras CSS dentro deste bloco.

@layer utilitarios {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}

A segunda maneira é criando uma camada de cascata nomeada sem inserir nenhuma regra CSS, como no exemplo abaixo:

@layer utilitarios;

Múltiplas camadas podem ser definidas de uma só vez; como, por exemplo:

@layer temas, layout, utilitarios;

Isto pode ser útil pois a ordem inicial na qual as camadas são declaradas definem qual camada tem preferência. Assim como declarações, a última camada a ser definida terá preferência se declarações concorrentes forem encontradas em múltiplas camadas. Aplicando ao exemplo anterior, se uma regra conflitante estiver nas camadas temas e utilitarios, a regra encontrada no utilitarios é a vencedora e será aplicada.

A regra definida no utilitarios será aplicada mesmo se tiver especificidade mais baixa que a regra em tema. Isso ocorre, pois uma vez que a ordem das camadas é estabelecida, especificidade e ordem de aparição das regras são ignoradas. Isso nos permite criar seletores CSS mais simples, já que você não precisa se preocupar tanto se um seletor CSS terá especificidade alta o suficiente para sobrescrever regras concorrentes, você só precisa verificar se a sua regra está localizada em uma camada definida posteriormente.

A terceira opção de criação de camada são as camadas anônimas, como no exemplo abaixo:

@layer {
  p {
    margin-block: 1rem;
  }
}

Esta camada funciona da mesma maneira que as camadas nomeadas; porém, não poderão ser atribuídas novas regras a esta camada depois. O seu grau de preferência segue a ordem de declaração das camadas, anônimas ou não, sendo menor do que as regras definidas fora de camada.

Outra maneira de criar uma camada de cascata é utilizando o @import. Neste caso, as regras serão as da folha de estilo importada. Lembre-se que a regra at @import deve vir antes dos outros tipos de regras, com exceção das regras @charset e @layer.

@import "tema.css" layer(utilitarios);

Camadas podem ser aninhadas (nested), como no exemplo abaixo:

@layer framework {
  @layer layout {
  }
}

Para juntas as regras da camada layout dentro de framework, junte os dois nomes com um ..

@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}

@layer = 
  @layer <layer-name>? { <rule-list> }  |
  @layer <layer-name># ;                

<layer-name> = 
  <ident> [ '.' <ident> ]*  

No exemplo seguinte, duas regras CSS são criadas. Uma para o elemento <p> fora de qualquer layer, e outra em uma camada chamada tipo com o seletor .caixa p.

Sem camadas, o seletor .caixa p teria a maior especificidade, então o texto 'Olá, mundo!' seria mostrado em verde. Mas como a camada tipo vem antes da camada anônima criada para agrupar todos as regras sem camada definida, o texto será mostrado roxo.

Perceba também a ordem. Mesmo se declararmos um estilo sem camada primeiro, ele ainda é aplicado depois dos estilos com camada.

HTML

<div class="caixa">
  <p>Olá, mundo!</p>
</div>

CSS

p {
  color: rebeccapurple;
}

@layer tipo {
  .caixa p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

Resultado

No exemplo seguinte, duas camadas são criadas sem regras definidas, e depois são aplicadas regras CSS para as duas camadas. A camada base define as propriedades color, border, font-size e padding. A camada especial define um valor de color diferente. Como o especial vem depois na definição das camadas, a cor que ele carrega é utilizada e o texto será mostrado com a cor rebeccapurple. Todas as outras regras da camada base ainda são aplicadas.

HTML

<div class="item">
  Eu estou sendo mostrado com <code>color: rebeccapurple</code> pois a camada
  <code>especial</code> vem depois da camada <code>base</code>. Minha borda
  verde, font-size, e padding vem da camada <code>base</code>.
</div>

CSS

@layer base, especial;

@layer especial {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}

Resultado

• @import
• Cascata, especificidade e herança
• CSSLayerBlockRule
• CSSLayerStatementRule
• !important
• revert-layer
• Introducing the CSS cascade
• Cascade layers
• The future of CSS: Cascade layers em bram.us (2021)