Cascade layers (@layer) और :is/:where selectors क्या हैं?

Question

Accepted Answer

ये विशेषताएं आपको **cascade** और **specificity** पर स्पष्ट नियंत्रण देती हैं — बड़े codebases में specificity-war समस्या को सीधे हल करती हैं।

## यह महत्वपूर्ण क्यों है

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

शक्ति: एक कम-specificity utility एक उच्च layer में एक उच्च-specificity नियम को निम्न layer में override कर सकता है। इसका मतलब है कि आपको override order प्रबंधित करने के लिए `!important` या selector hacks की अब आवश्यकता नहीं है — आप CSS को layers (reset → framework → components → overrides) में organize करते हैं और क्रम पूर्वानुमानित है।

## :where() — शून्य specificity

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

`:where()` अपने arguments से मेल खाता है लेकिन **कोई specificity नहीं** जोड़ता — defaults/resets के लिए perfect जिन्हें कोई भी आसानी से override कर सकता है:

```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 के लिए जब आप normal weight चाहते हैं; `: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 को स्पष्ट और intentional बनाता है (अब `!important` escalation नहीं), `:where()` resets/defaults लिखता है जो आपसे कभी लड़ते नहीं हैं, और `:is()` जटिल selectors को DRY रखता है।

ये scalable, framework-friendly CSS architecture के लिए foundational tools हैं।