O que são cascade layers (@layer) e os seletores :is/:where?

Question

IT Interview Practice · Accepted Answer

Essas funcionalidades lhe dão controle **explícito** sobre a **cascade** e a **especificidade** — atacando diretamente o problema de especificidade-war em bases de código grandes.

## @layer — ordenação explícita de cascade

`@layer` permite que você defina camadas nomeadas cuja ordem *você* controla. Estilos em uma camada posterior vencem camadas anteriores **independentemente da especificidade**:

```css
@layer reset, base, components, utilities; /* declare order: later = higher priority */

@layer base {
  a { color: blue; }            /* even though this is defined... */
}
@layer components {
  .link { color: green; }       /* ...this wins because `components` > `base`, */
}                                /* even though .link isn't more specific by itself */
```

O poder: um utilitário com baixa especificidade em uma camada alta pode sobrescrever uma regra com alta especificidade em uma camada baixa. Isso significa que você não precisa mais de `!important` ou truques de seletor para gerenciar a ordem de sobrescrita — você organiza CSS em camadas (reset → framework → components → overrides) e a ordem é previsível.

## :where() — especificidade zero

```css
:where(.a, .b, .c) p { color: red; } /* specificity contribution: 0,0,0 */
```

`:where()` corresponde aos seus argumentos, mas não adiciona **nenhuma especificidade** — perfeito para padrões/resets que qualquer pessoa pode facilmente sobrescrever:

```css
:where(ul) { margin: 0; } /* a reset that ANY later rule beats effortlessly */
```

## :is() — mesmo comportamento de correspondência, assume a especificidade mais alta

```css
:is(h1, h2, h3) a { } /* matches the same elements, but specificity = the most specific arg */
```

`:is()` encurta longas listas de seletores (como `:where()`) mas **contribui** com especificidade (a do seu argumento mais específico). Então use `:is()` para agrupamento quando você quer peso normal; `:where()` quando você quer que seja facilmente sobrescrito.

## :is vs :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (the #id counts) */
:where(#id, .class) p { }/* specificity: 0,0,0 (always zero) */
```

## Por que isso importa

Juntas, essas funcionalidades resolvem o problema de manutenção mais difícil do CSS — **especificidade descontrolada**. `@layer` torna a ordem de sobrescrita explícita e intencional (sem mais escalação de `!important`), `:where()` escreve resets/padrões que nunca conflitam com você, e `:is()` mantém seletores complexos DRY.

São ferramentas fundamentais para arquitetura CSS escalável e amigável com frameworks.

@layer — ordenação explícita de cascade

:where() — especificidade zero

:is() — mesmo comportamento de correspondência, assume a especificidade mais alta

:is vs :where

Por que isso importa

Perguntas relacionadas