Cilat janë cascade layers (@layer) dhe selektorët :is/:where?

Question

Accepted Answer

Këto veçori ju japin kontroll të qartë mbi **cascade** dhe **specificity** — duke sulmuar drejtpërdrejt problemin e luftës specificity në baza të mëdha kodi.

## @layer — renditja e qartë e cascade

`@layer` ju lejon të përcaktoni shtresa të emëruara, rendi i të cilave *ju* kontrolloni. Stile në një shtresë më të vonshme mposhtin shtresat e mëparshme **pavarësisht nga specificity**:

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

Fuqia: një utility me specificity të ulët në një shtresë të lartë mund të anulojë një rregull me specificity të lartë në një shtresë të ulët. Kjo do të thotë që nuk keni më nevojë për `!important` ose truke selektori për të menaxhuar rendin e anulimit — ju organizoni CSS në shtresa (reset → framework → komponentë → overrides) dhe rendi është i parashikueshëm.

## :where() — specificity zero

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

`:where()` përputhet me argumentet e tij por nuk shton **asnjë specificity** — i përsosur për parazgjedhje/reset-e që kushdo mund të anulojë lehtë:

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

## :is() — përputhja e njëjtë, merr specificity-in më të lartë

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

`:is()` shkurton lista të gjata selektori (si `:where()`) por **kontribuon** specificity (atë të argumentit të tij më specifik). Prandaj `:is()` për grupim kur doni peshë normale; `:where()` kur doni që të jetë e anullueshme.

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

## Pse ka rëndësi

Se bashku këto zgjidhin problemin më të vështirë të mirëmbajtjes CSS — **specificity e pakontrolluar**. `@layer` e bën rendin e anulimit të qartë dhe të synuar (nuk më ka eskalim `!important`), `:where()` shkruan reset-e/parazgjedhje që nuk luftojnë asnjë herë me ju, dhe `:is()` mbajnë selektorët kompleksë DRY.

Janë mjete themelore për arkitekturën CSS të shkallëzueshme dhe miqësore ndaj framework-ut.