ক্যাসকেড লেয়ার (@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()` এর যুক্তিগুলি মেলে কিন্তু **কোন বিশেষত্ব যোগ করে না** — ডিফল্ট/resets এর জন্য নিখুঁত যা যে কেউ সহজেই অতিক্রম করতে পারে:

```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()` resets/defaults লেখে যা কখনও আপনার সাথে লড়াই করে না, এবং `:is()` জটিল নির্বাচকদের DRY রাখে।

তারা স্কেলযোগ্য, ফ্রেমওয়ার্ক-বান্ধব CSS আর্কিটেকচার এর জন্য মৌলিক সরঞ্জাম।