Cascade layers (@layer)

Baseline 2022 (Chrome 99, Safari 15.4, Firefox 97); disponible de forma generalizada.

Chrome 99Edge 99Safari 15.4Firefox 97

Declara capas ordenadas de modo que las capas posteriores siempre ganan a las anteriores, sea cual sea la especificidad. Acaba con las guerras de especificidad entre resets, CSS de terceros y componentes: una sobrescritura con una sola clase le gana a un selector `#id` en una capa 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: En la práctica no hace falta ninguno; todos los navegadores evergreen soportan capas. Los estilos sin capa ganan a todas las capas, así que mantén todo dentro de capas.

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

Prompt

Organiza el CSS en cascade layers declaradas una sola vez al principio: `@layer reset, base, components, utilities, overrides;`. Pon el CSS de terceros o generado en una capa baja (`@layer vendor`), los componentes por encima y las utilidades al final para que ganen sin `!important`. Nunca dejes reglas fuera de capa salvo la propia declaración de orden `@layer`.