Cascade layers (@layer) మరియు :is/:where సెలెక్టర్‌లు ఏమిటి?

Question

Accepted Answer

ఈ ఫీచర్‌లు **cascade** మరియు **specificity** మీద స్పష్టమైన నియంత్రణను మీకు ఇస్తాయి — పెద్ద కోడ్‌బేస్‌లలో specificity-యుద్ధ సమస్యను నేరుగా ఎదుర్కోవడం.

## @layer — స్పష్టమైన cascade ఆర్డరింగ్

`@layer` మీకు పేరు పెట్టిన లేయర్‌లను నిర్వచించడానికి అనుమతిస్తుంది, వాటి క్రమం *మీరు* నియంత్రించుకుంటారు. తరువాతి లేయర్‌లో ఉన్న శైలులు **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 ఉటిలిటీ తక్కువ లేయర్‌లో ఎత్తైన-specificity నియమాన్ని భర్తీ చేయగలదు. దీని అర్థం మీరు ఇకపై ఓవర్‌రైడ్ ఆర్డర్‌ను నిర్వహించడానికి `!important` లేదా సెలెక్టర్ హ్యాక్‌ల అవసరం లేదు — మీరు CSS ను లేయర్‌లుగా ఆర్గనైజ్ చేస్తారు (reset → framework → components → overrides) మరియు ఆర్డర్ ఎంచుకోవచ్చు.

## :where() — జీరో specificity

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

`:where()` దాని ఆర్గ్యుమెంట్‌లతో సరిపోతుంది కానీ **specificity చేర్చదు** — డిఫాల్ట్‌ల/రీసెట్‌ల కోసం సరిపోతుంది, ఎవరైనా సులభంగా భర్తీ చేయగలరు:

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

## :is() — ఒకే మ్యాచింగ్, అత్యధిక specificity తీసుకుంటుంది

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

`:is()` طويلة సెలెక్టర్ లిస్ట్‌లను (`:where()` వంటి) చిన్నచేస్తుంది కానీ **specificity కలిపిస్తుంది** (దాని అత్యంత నిర్దిష్ట ఆర్గ్యుమెంట్ యొక్క). కాబట్టి సాధారణ బరువు అందుకోవాలనుకున్నప్పుడు `:is()` ని గ్రూపింగ్ కోసం ఉపయోగించండి; మీరు దానిని భర్తీ చేయగలిగితే `:where()` ఉపయోగించండి.

## :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 యొక్క కఠిన సంరక్షణ సమస్యను పరిష్కరిస్తాయి — **నియంత్రణ రహిత specificity**. `@layer` ఓవర్‌రైడ్ ఆర్డర్‌ను స్పష్టమైన మరియు ఉద్దేశ్యమైన (మరిన్ని `!important` ఎస్కేలేషన్‌లు లేవు) చేస్తుంది, `:where()` రీసెట్‌లు/డిఫాల్ట్‌లను వ్రాస్తుంది, అవి మీతో కూడా సంघర్ష చేయవు, మరియు `:is()` సంక్లిష్ట సెలెక్టర్‌లను DRY ఉంచుతుంది.

స్కేలేబుల్, ఫ్రేమ్‌వర్క్-స్నేహపూర్వక CSS ఆర్కిటెక్చర్ కోసం ఇవి ఫౌండేషనల్ టూల్‌లు.