Cascade layers (@layer) आणि :is/:where selectors काय आहेत?

Question

Accepted Answer

या वैशिष्ट्यांमुळे तुम्हाला **cascade** आणि **specificity** वर स्पष्ट नियंत्रण मिळते — मोठ्या codebase मध्ये 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 */
```

शक्ती: उच्च layer मधील कमी-specificity utility, कमी layer मधील उच्च-specificity rule ला override करू शकते. याचा अर्थ तुम्हाला override order व्यवस्थापित करण्यासाठी `!important` किंवा selector hacks यांची आवश्यकता नाही — तुम्ही CSS ला layers मध्ये (reset → framework → components → overrides) संस्थित करता आणि क्रम पूर्वानुमानित असतो.

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

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

`:where()` त्याच्या arguments ला मिळते पण **कोणतीही specificity जोडत नाही** — defaults/resets साठी परिपूर्ण जे कोणी सहजपणे 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 मध्ये योगदान देते** (त्याच्या सर्वात विशिष्ट argument चा). तर grouping साठी `:is()` वापरा जेव्हा तुम्हाला सामान्य 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) */
```