CASCADE layers (@layer) અને :is/:where selectors શું છે?

Question

Accepted Answer

આ વિશેષતાઓ તમને **cascade** અને **specificity** પર સ્પષ્ટ નિયંત્રણ આપે છે — મોટા codebase-ગણમાં specificity-યુદ્ધ સમસ્યાને સીધો હલ કરે છે।

## શા માટે તે મહત્વપૂર્ણ છે

`@layer` તમને નામકરણ કરેલ layers વ્યાખ્યાયિત કરવા દે છે જેનો ક્રમ **તમે** નિયંત્રિત કરો છો। પછીના layer-ના styles પહેલા layers-ને હરાવે છે **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 */
```

શક્તિ: નીચલા layer-માં ઉચ્ચ-specificity નિયમ ઓવરરાઇડ કરી શકે છે। આનો અર્થ એ છે કે તમને વધુ `!important` અથવા selector hacks ની જરૂર નથી પડતી override order વ્યવસ્થાપિત કરવા માટે — તમે CSS ને layers-માં ગોઠવો છો (reset → framework → components → overrides) અને order પ્રાપ્ત છે।

## :where() — શૂન્ય specificity

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

`:where()` તેના arguments-ને સ્વીકારે છે પરંતુ **કોઈ specificity** ઉમેરે છે નહીં — defaults/resets માટે પૂર્ણ જે કોઈ પણ સરળતાથી ઓવરરાઇડ કરી શકે :

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

## :is() — સમાન matching, સર્વોચ્ચ specificity લે છે

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

`:is()` લાંબા selector lists-ને ટૂંકું કરે છે (જેમ `:where()` છે) પરંતુ **specificity-માં વર્તમાન** છે (તેના સૌથી specific argument-ની)। તેથી `:is()` grouping-માટે જ્યારે તમે સામાન્ય વજનનો કામ કરો છો ; `:where()` જ્યારે તમે તેને 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) */
```

અલગ અલગ આ CSS-ની સૌથી મુશ્કેલ maintenance સમસ્યાને હલ કરે છે — **અનિયંત્રિત specificity**। `@layer` override order-ને સ્પષ્ટ અને અમુક કર્યું (વધુ `!important` escalation નથી), `:where()` resets/defaults લખે છે જે તમને ક્યારેય લડે નહીં, અને `:is()` જટિલ selectors-ને DRY રાખે છે।

તે scalable, framework-friendly CSS architecture-માટે મૂળભૂત સાધનો છે।