Cascade layers (@layer) ਅਤੇ :is/:where selectors ਕੀ ਹਨ?

Question

Accepted Answer

ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਤੁਹਾਨੂੰ **cascade** ਅਤੇ **specificity** ਉੱਤੇ ਸਪਸ਼ਟ ਨਿਯੰਤਰਣ ਦਿੰਦੀਆਂ ਹਨ — ਸਿੱਧੇ ਤੌਰ ਉੱਤੇ ਵੱਡੇ codebases ਵਿੱਚ specificity-ਯੁੱਧ ਸਮੱਸਿਆ ਨੂੰ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੇ ਹਨ।

## @layer — ਸਪਸ਼ਟ cascade ਆਰਡਰਿੰਗ

`@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 ਵਿੱਚ ਇੱਕ ਘੱਟ layer ਵਿੱਚ ਉੱਚ-specificity rule ਨੂੰ override ਕਰ ਸਕਦੀ ਹੈ। ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਹੋਰ `!important` ਜਾਂ selector hacks ਦੀ ਲੋੜ ਨਹੀਂ override ਕ੍ਰਮ ਨੂੰ ਪ੍ਰਬੰਧਤ ਕਰਨ ਲਈ — ਤੁਸੀਂ CSS ਨੂੰ layers ਵਿੱਚ ਸੰਗਠਿਤ ਕਰਦੇ ਹੋ (reset → framework → components → overrides) ਅਤੇ ਆਰਡਰ ਅਨੁਮਾਨਿਤ ਹੈ।

## :where() — zero 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 ਵਿੱਚ ਯੋਗਦਾਨ ਪਾਉਂਦਾ ਹੈ (ਇਸਦੀ ਸਭ ਤੋਂ specific argument)। ਇਸ ਲਈ `:is()` grouping ਲਈ ਜਦੋਂ ਤੁਸੀਂ ਸਾਧਾਰਨ ਭਾਰ ਚਾਹੁੰਦੇ ਹੋ; `:where()` ਜਦੋਂ ਤੁਸੀਂ ਇਸਨੂੰ override ਯੋਗ ਚਾਹੁੰਦੇ ਹੋ।

## :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 ਦੀ ਸਭ ਤੋਂ ਕਠਿਨ ਰਖ-ਰਖਾਅ ਸਮੱਸਿਆ ਹਲ ਕਰਦੇ ਹਨ — **uncontrolled specificity**। `@layer` override ਆਰਡਰ ਨੂੰ explicit ਅਤੇ intentional ਬਣਾਉਂਦਾ ਹੈ (ਹੋਰ `!important` escalation ਨਹੀਂ), `:where()` resets/defaults ਲਿਖਦਾ ਹੈ ਜੋ ਕਦੇ ਤੁਹਾਡੇ ਨਾਲ ਲੜਾਈ ਨਹੀਂ ਕਰਦੇ, ਅਤੇ `:is()` ਗੁੰਝਲਦਾਰ selectors ਨੂੰ DRY ਰੱਖਦਾ ਹੈ।

ਉਹ scalable, framework-friendly CSS architecture ਲਈ ਬੁਨਿਆਦੀ ਸਾਧਨ ਹਨ।