# Cascade layers (@layer)

Status: Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); amplamente disponível.  
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/@layer  
Página: https://designforai.dev/pt/css/cascade-layers

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.

## HTML

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

## CSS

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

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.

## 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`.