Cascade layers (@layer)

Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); amplamente disponível.

Chrome 99Edge 99Safari 15.4Firefox 97

Declara camadas ordenadas para que as camadas posteriores sempre vençam as anteriores, independentemente da especificidade. Acaba com as guerras de especificidade entre resets, CSS de terceiros e componentes: uma sobrescrita de classe única vence um seletor `#id` numa camada inferior.

CSS

@layer reset, vendor, components, overrides;
@layer vendor {
   #cta {
    background: #c0392b;
    color: #fff;
    border: 0;
    padding: 10px 18px
  }
}
@layer components {
   .fx-004 {
    background: #2563eb;
    border-radius: 8px;
    font: 600 15px system-ui
  }
}
@layer overrides {
   .fx-004 {
    background: #111
  }
}
.fx-004 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<button class="fx-004" id="cta">Layered button</button>

Fallback: Nenhum necessário na prática; todos os navegadores evergreen suportam camadas. Estilos sem camada vencem todas as camadas, então mantenha tudo em camadas.

Fonte: developer.mozilla.org/en-US/docs/Web/CSS/@layer

Prompt

Organize o CSS em cascade layers declaradas uma vez no topo: `@layer reset, base, components, utilities, overrides;`. Coloque CSS de terceiros ou gerado numa camada baixa (`@layer vendor`), componentes acima dela, e utilities por último para vencerem sem `!important`. Nunca deixe regras fora de camada, exceto a própria declaração de ordem `@layer`.