X'inhuma cascade layers (@layer) u selettori :is/:where?

Question

Accepted Answer

Dawn il-features jagħtuk kontroll esplisit fuq il-**cascade** u l-**specificity** — jisolvaw direttament il-problema tar-razzjonalità-war fil-kodbasaj kbar.

## Għaliex hija importanti

`@layer` tgħallmek tiddefinisci layers bl-isem, li l-ordni taghom *inti* tikontrollja. Stilijiet f'layer aktar tard jibdutu layers aktar kmieni **irrispettivament mill-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 */
```

Il-qawwa: utility b'specificity baxxa f'layer għoli tista' tibdel regola b'specificity għolja f'layer baxxa. Dan ifisser li m'għadek bużżonneed `!important` jew seltur hacks biex timmaniġġja l-ordni tal-override — int torganizza CSS f'layers (reset → framework → components → overrides) u l-ordni hija predittivle.

## :where() — specificity ta' żeru

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

`:where()` taqbel mal-argumenti tiegħu imma ma' żżid **ebda specificity** — perfett għal defaults/resets li kull wieħed jista' faċilment idaħħal:

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

## :is() — matching l-istess, jieħu l-specificity għoli

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

`:is()` tqassar listi ta' selturi twal (bhal `:where()`) imma **tikontribwixxi** għall-specificity (ta' l-argument aktar spesifiku). Għalhekk `:is()` għall-grouping meta trid il-piż normali; `:where()` meta trid jkun overridable.

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