Cascade layers (@layer) اور :is/:where selectors کیا ہیں؟

Question

Accepted Answer

یہ خصوصیات آپ کو **cascade** اور **specificity** پر واضح کنٹرول دیتی ہیں — براہ راست بڑے codebases میں specificity-war مسئلے پر حملہ کرتی ہیں۔

## @layer — واضح cascade ترتیب

`@layer` آپ کو نام والی layers کی تعریف کرنے دیتا ہے جس کی ترتیب *آپ* کنٹرول کرتے ہیں۔ بعد کی layer میں styles پہلے والی layers کو **خصوصیت سے قطع نظر** شکست دیتے ہیں:

```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 میں کم layer میں high-specificity قاعدے کو override کر سکتا ہے۔ اس کا مطلب ہے کہ آپ کو `!important` یا selector hacks کی ضرورت نہیں ہے override ترتیب کو manage کرنے کے لیے — آپ CSS کو layers میں منظم کرتے ہیں (reset → framework → components → overrides) اور ترتیب predictable ہے۔

## :where() — صفر specificity

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

`:where()` اپنی arguments کو match کرتا ہے لیکن **کوئی 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 میں اضافہ کرتا ہے** (اپنی سب سے زیادہ specific argument کی)۔ تو `:is()` grouping کے لیے جب آپ normal weight چاہتے ہیں؛ `:where()` جب آپ چاہتے ہیں کہ یہ overridable ہو۔

## :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 کے سب سے مشکل maintenance مسئلے کو حل کرتے ہیں — **بے دریغ specificity**۔ `@layer` override ترتیب کو واضح اور intentional بناتا ہے (مزید `!important` escalation نہیں)، `:where()` resets/defaults لکھتا ہے جو کبھی آپ سے نہیں لڑتے، اور `:is()` پیچیدہ selectors کو DRY رکھتا ہے۔

یہ scalable، framework-friendly CSS architecture کے لیے بنیادی tools ہیں۔