Czym są cascade layers (@layer) i selektory :is/:where?

Question

Accepted Answer

Te funkcje dają ci **jawną kontrolę** nad **cascade** i **specyficzością** — bezpośrednio atakując problem specificity-wars w dużych bazach kodu.

## @layer — jawne porządkowanie cascade

`@layer` pozwala ci zdefiniować nazwane warstwy, których kolejność *ty* kontrolujesz. Style w późniejszej warstwie pokonują wcześniejsze warstwy **niezależnie od specyficzności**:

```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 */
```

Siła: utility o niskiej specyficzności w wysokiej warstwie może przesłonić regułę o wysokiej specyficzności w niskiej warstwie. Oznacza to, że nie potrzebujesz już `!important` ani sztuczek selektorów do zarządzania porządkiem przesłonięć — organizujesz CSS w warstwy (reset → framework → components → overrides) i kolejność jest przewidywalna.

## :where() — zerowa specyficzność

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

`:where()` dopasowuje swoje argumenty, ale nie dodaje **żadnej specyficzności** — idealne dla domyślnych ustawień/resetów, które każdy może łatwo przesłonić:

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

## :is() — takie samo dopasowanie, bierze najwyższą specyficzność

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

`:is()` skraca długie listy selektorów (jak `:where()`), ale **ma** wpływ na specyficzność (tego najbardziej specyficznego argumentu). Więc `:is()` do grupowania, gdy chcesz normalną wagę; `:where()` gdy chcesz, aby można to było przesłonić.

## :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) */
```

## Dlaczego to ważne

Razem te rozwiązują najtrudniejszy problem utrzymania CSS — **niekontrolowana specyficzność**. `@layer` czyni porządek przesłonięć jawnym i celowym (bez więcej eskalacji `!important`), `:where()` pisze resety/domyślne ustawienia, które nigdy się z tobą nie kłócą, a `:is()` utrzymuje złożone selektory DRY.

Są to podstawowe narzędzia do skalowalnej, przyjaznej dla frameworków architektury CSS.