Cascade layers (@layer) na selektori :is/:where ni nini?

Question

Accepted Answer

Vipengele hivi vinakupa udhibiti dhahiri juu ya **cascade** na **specificity** — kulipiga moja kwa moja tatizo la vita la specificity katika besi kubwa za nambari.

## @layer — uoroaji dhahiri wa cascade

`@layer` inakuwezesha kufafanua tabaka tupu lenye majina, ambayo agizo lako **unalo** kudhibiti. Mitindo katika tabaka la baadaye inashinda tabaka la awali **bila kujali 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 */
```

Uwezo: utility yenye specificity ya chini katika tabaka la juu inaweza kuondoa sheria yenye specificity ya juu katika tabaka la chini. Hii ina maana kwamba hutakuwa na haja ya `!important` au hila za selector ili kudhibiti agizo la kupinga — unaoroganiza CSS katika tabaka (reset → framework → sehemu → overrides) na agizo ni lenye utabiri.

## :where() — specificity ya sifuri

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

`:where()` linafanana na hoja zake lakini halishadhanisha **specificity yoyote** — kamili kwa default/reset ambazo kila mtu anaweza kuondoa kwa urahisi:

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

## :is() — muundane sawa, inakubali specificity ya juu zaidi

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

`:is()` inaipunguza orodha ndefu za selector (kama `:where()`) lakini **inachangia** specificity (ya hoja yake yenye maalum zaidi). Kwa hivyo tumia `:is()` kwa kuunganisha wakati unataka uzani wa kawaida; `:where()` wakati unataka iwe inaweza kubadilishwa.

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

## Kwa nini inahusu

Skandali ina suluhisho tatizo gumu zaidi la matengenezo CSS — **specificity isiyo na udhibiti**. `@layer` inafanya agizo la kupinga kuwa dhahiri na lenye makusudi (hakuna zaidi ya uongezaji `!important`), `:where()` inaandika reset/default ambazo hazipigani na wewe, na `:is()` inaendesha selector zenye matatizo DRY.

Zi zana za msingi kwa muundo wa CSS unaokua na wenye rafiki wa muundo.