@layer

Você pode utilizar o @layer para criar uma camada de cascata de três maneiras. A primeira é como no exemplo acima, criando um bloco com o @layer e inserindo as regras CSS dentro deste bloco.

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

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

A camada de cascata também pode ser criada com o @import, neste caso as regras estarão no arquivo CSS importado:

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

Você também pode criar uma camada de cascata nomeada sem atrelar à nenhum estilo. Você pode definir uma única camada:

@layer utilitarios;

Ou, múltiplas camadas de uma vez só, 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.

Qualquer estilo que não está atrelado à nenhuma camada são reunidos em uma mesma camada anônima que tem preferência à todas as outras camadas declaradas. Isso significa que qualquer estilo declarado fora de uma camada sobrescreve os estilos declarados em uma camada.

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;
  }
}

Se uma camada não tiver seu nome declarado, como por exemplo:

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

Então uma camada anônima é criada. Ela funciona da mesma maneira das camadas nomeadas, porém novas regras não podem ser adicionadas à essa camada.

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

<layer-name> = 
  <ident> (en-US) [ '.' <ident> (en-US) ]*  

No exemplo seguinte, duas regras CSS são criadas. Uma para o elemento <p> fora de qualquer layer, e outra dentro de 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 layer 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: .5em;
  }
}

Resultado

• The Future of CSS: Cascade Layers