कास्केड लेयर्स (@layer) र :is/:where सिलेक्टरहरू के हुन्?

Question

Accepted Answer

यी फीचरहरूले तपाईंलाई **कास्केड** र **विशिष्टता** को स्पष्ट नियन्त्रण दिन्छन् — सीधा ठूलो कोडबेसहरूमा विशिष्टता-युद्ध समस्यालाई आक्रमण गर्दै।

## @layer — स्पष्ट कास्केड अर्डरिङ

`@layer` ले तपाईंलाई नामकरण गरिएका लेयरहरू परिभाषित गर्न दिन्छ जसको क्रम *तपाई* नियन्त्रण गर्नुहुन्छ। पछिको लेयरमा शैलीहरू पहिलेको लेयरहरूलाई **विशिष्टता जहाँसुकै** हराउन्छन्:

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

शक्ति: कम-विशिष्टता उपयोगिता उच्च लेयरमा कम लेयरमा उच्च-विशिष्टता नियमलाई ओभरराइड गर्न सक्छ। यसको अर्थ तपाईंले अब अनुक्रम अधिकार व्यवस्थापन गर्न `!important` वा सिलेक्टर ह्याकहरू चाहिदैन — तपाई CSS लाई लेयरहरूमा संगठित गर्नुहुन्छ (reset → framework → components → overrides) र अर्डर अनुमानयोग्य छ।

## :where() — शून्य विशिष्टता

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

`:where()` ले आफ्नो तर्कहरूलाई मेल खान्छ तर **कुनै विशिष्टता** जोडदैन — पूर्वनिर्धारित/रिसेटहरूको लागि परिपूर्ण जो कसैले सजिलैसँग ओभरराइड गर्न सक्छ:

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

## :is() — एकै मिलान, उच्चतम विशिष्टता लिन्छ

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

`:is()` ले लामो सिलेक्टर सूचीहरूलाई छोटो गर्दछ (जस्तै `:where()`) तर **गर्दछ** विशिष्टता योगदान (यसको सबैभन्दा विशिष्ट तर्कको)। त्यसैले सामान्य वजन चाहिँ `:is()` समूहको लागि; ओभरराइड गर्न चाहिँ `:where()` को लागि।

## :is बनाम :where

```css
:is(#id, .class) p { }   /* specificity: 1,0,0 (the #id counts) */
:where(#id, .class) p { }/* specificity: 0,0,0 (always zero) */
```

## किन यो महत्त्वपूर्ण छ

सँगै यी CSS को सबैभन्दा कठिन रखरखाव समस्या समाधान गर्दछन् — **अनियन्त्रित विशिष्टता**। `@layer` ले अधिकार अर्डरलाई स्पष्ट र इच्छाकृत बनाउँछ (अब अधिक `!important` संघर्ष छैन), `:where()` ले रिसेटहरू/पूर्वनिर्धारितहरू लेख्दछ जो कहिले पनि तपाईंसँग लडाइँ गर्दैन, र `:is()` ले जटिल सिलेक्टरहरूलाई DRY राख्दछ।

यी स्केलेबल, फ्रेमवर्क-अनुकूल CSS आर्किटेक्चरका लागि आधारभूत उपकरणहरू हुन्।