Cascade, specificity আর inheritance — কোন নিয়ম জেতে

১ · দুই নিয়ম, এক element — কে জেতে?

আপনার অনলাইন দোকানের পাতায় একটি দাম লেখা আছে। আপনি CSS-এ লিখলেন দাম হবে সবুজ। কিছুক্ষণ পর একই ফাইলে, অন্য জায়গায়, আরেকজন সহকর্মী লিখলেন সব অনুচ্ছেদ হবে লাল। ব্রাউজার এখন কী করবে? একটি লেখা তো একসাথে সবুজ আর লাল হতে পারে না। একটিকে জিততেই হবে।

পর্ব ১৬-এ দেখেছেন, CSS-এর প্রতিটি rule-এর দুটি অংশ — একটি selector (কাকে সাজাব) আর কয়েকটি declaration (property আর মানের জোড়া, যেমন color: green). পর্ব ১৭-এ দেখেছেন selector কত রকমের হয়। বাস্তবের যেকোনো সাইটে একটি element-এর ওপর একসাথে দশ-বিশটি rule লাগে — ব্রাউজারের নিজের ডিফল্ট, আপনার ফাইল, কোনো library, কখনো HTML-এর ভেতরে লেখা style. এদের মধ্যে একই property নিয়ে বিরোধ হলে কে জিতবে, সেটা ঠিক করার পুরো নিয়মের নাম cascade.

শুরু করা যাক একটি ছোট ধাঁধা দিয়ে। নিচের CSS-এ দুটি জোড়া নিয়ম আছে। প্রিভিউ দেখার আগে অনুমান করুন — লেখার রং কী হবে, আর পেছনের রং কী হবে?

/* জোড়া ১: একই selector, দুই রং */
p { color: green; }
p { color: crimson; }

/* জোড়া ২: আগে class, পরে type selector */
.notice { background: #fef3c7; }
p { background: #e0f2fe; }

p { padding: 8px; font-size: 18px; }

এই ছোট উদাহরণেই দুটি আলাদা নিয়ম কাজ করল: লেখার ক্রম আর specificity. আরও কয়েকটি আছে। নামটির মানেও এখান থেকেই — cascade ইংরেজিতে ধাপে ধাপে নেমে আসা ঝরনা। নিয়মগুলো যেন ঝরনার এক একটি ধাপ: ওপরের ধাপে সিদ্ধান্ত হয়ে গেলে নিচে নামার দরকার পড়ে না।

২ · Cascade-এর পুরো সিঁড়ি — ব্রাউজার কোন ক্রমে বিচার করে

প্রথমে একটি জরুরি কথা: cascade কাজ করে প্রতিটি property-র জন্য আলাদাভাবে। একটি rule পুরোটা জেতে বা হারে না। একটি rule-এর color হারতে পারে, অথচ একই rule-এর padding জিততে পারে। ব্রাউজার প্রতিটি element-এর প্রতিটি property-র জন্য সব প্রতিযোগী declaration জড়ো করে, তারপর নিচের প্রশ্নগুলো এই ক্রমে করে। কোনো প্রশ্নে একজন স্পষ্ট এগিয়ে থাকলে খেলা সেখানেই শেষ।

/* ব্রাউজারের নিজের stylesheet */
h1 { font-size: 2em; }

/* আপনার style.css */
h1 { font-size: 28px; }   ← জিতল: author > user-agent

/* style.css */
#buy.btn.primary { color: white; }

<!-- HTML -->
<button id="buy" class="btn primary"
        style="color: yellow">   ← জিতল

@layer base {
  #buy { color: red; }      (1,0,0) — তবু হারল
}
.btn { color: white; }     ← জিতল: layer-এর বাইরে

#buy { color: red; }       (1,0,0) ← জিতল
.btn.primary { color: white; } (0,2,0)

@scope (.page) { p { color: gray; } }
@scope (.card) { p { color: navy; } } ← জিতল

<div class="page"><div class="card"><p>
p-এর সবচেয়ে কাছের root হলো .card

.price { color: green; }
.price { color: crimson; }  ← জিতল: পরে লেখা

৩ · তিন উৎস আর !important — কর্তৃত্বের লড়াই

একটি পাতার CSS তিনটি জায়গা থেকে আসতে পারে। এই উৎসকে বলে cascade origin.

সাধারণ declaration-এর ক্ষেত্রে ক্রমটা সহজ: author > user > user-agent. কিন্তু declaration-এর শেষে !important লিখলে সেটি একটি আলাদা, উঁচু শ্রেণিতে উঠে যায় — আর সেই শ্রেণিতে উৎসের ক্রম উল্টে যায়:

উল্টে যাওয়ার কারণটা মানবিক। পাঠক যখন !important দিয়ে বলছেন “আমার লেখা অন্তত 20px হতেই হবে”, তখন সেটা সাধারণত পছন্দ নয়, প্রয়োজন — চোখের সমস্যা, পড়ার অসুবিধা। লেখকের নকশা যত সুন্দরই হোক, সেই প্রয়োজনকে হারাতে দেওয়া যায় না। (CSS1-এ নিয়মটা উল্টো ছিল; ১৯৯৮ সালের CSS2-এ এই পরিবর্তন আসে — ভাবনার প্রশ্ন ৩-এ গল্পটা আছে।)

এবার author-এর ভেতরের লড়াই দেখুন। নিচের কোডে একটি id rule, !important-ওয়ালা একটি class rule আর একটি inline style আছে। তিনটি অনুচ্ছেদের রং কী হবে, আগে অনুমান করুন:

<style>
  #offer { color: navy; }
  .price { color: green !important; }
  p { font-size: 20px; font-weight: bold; margin: 6px 0; }
</style>

<p id="offer" class="price" style="color: purple">১. ঈদ অফার: ৳ ৯৯৯</p>
<p class="price">২. শুধু class আছে</p>
<p id="offer2" style="color: purple">৩. শুধু inline style আছে</p>

৪ · Specificity — তিন ঘরের হিসাব, পয়েন্ট নয়

Specificity মানে selector-টি কতটা “নির্দিষ্ট” করে element-কে চিহ্নিত করছে। “সব অনুচ্ছেদ” (p) একটি ঢালাও কথা; “নোটিশ class-এর অনুচ্ছেদ” (.notice) আরও নির্দিষ্ট; “অফার নামের একটিমাত্র element” (#offer) সবচেয়ে নির্দিষ্ট। ব্রাউজার এই নির্দিষ্টতা মাপে তিনটি ঘরে গুনে, যাকে লেখা হয় (a, b, c):

তুলনার নিয়ম একটাই, আর এটাই সবচেয়ে গুরুত্বপূর্ণ: বাঁ দিক থেকে ঘর ধরে তুলনা করুন। যার a বেশি, সে জিতল — বাকি ঘর দেখার দরকার নেই। a সমান হলে b দেখুন, তারপর c. এটা ঠিক অভিধানে শব্দ সাজানোর মতো: “কলম” আর “কাগজ”-এর মধ্যে কোনটি আগে, তা ঠিক হয় প্রথম যে অক্ষরে পার্থক্য, সেখান থেকেই। পরের অক্ষর যতই হোক, কিছু যায় আসে না।

নিচের ডায়াগ্রামে আটটি selector-এর specificity এক এক করে গোনা হচ্ছে। “পরে” চাপুন, আর প্রতিটি ধাপে কোন অংশ কোন ঘরে যাচ্ছে খেয়াল করুন:

1p2.price3ul li.sale4#cart .item:hover5a[href^="https"]::after6:is(#main, .box) p7:where(#main, .box) p8.card:not(.sold, #x) > *

কেন “id = ১০০ পয়েন্ট, class = ১০ পয়েন্ট” ভুল

পুরোনো অনেক টিউটোরিয়াল (আর AI-ও প্রায়ই) শেখায়: id-এর জন্য ১০০, class-এর জন্য ১০, type-এর জন্য ১ পয়েন্ট যোগ করুন, যার মোট বেশি সে জেতে। ছোট উদাহরণে এটা মিলে যায় বলে ভুলটা ধরা পড়ে না। কিন্তু ঘরগুলো একটি থেকে আরেকটিতে “উপচে পড়ে” না — ১১টি class মিলে (0,11,0) হয়, ১১০ পয়েন্ট নয়, আর সেটি (1,0,0)-এর কাছে হারে। নিজেই পরীক্ষা করুন:

/* (1,0,0) — একটি মাত্র id */
#box { background: seagreen; }

/* (0,11,0) — এগারোটি class, আর পরে লেখা */
.a.b.c.d.e.f.g.h.i.j.k { background: tomato; }

div { color: white; padding: 16px; font-size: 20px; border-radius: 8px; }

:is() আর :where() — একই কাজ, উল্টো ওজন

:is() আর :where() দুটোই একটি selector-তালিকাকে এক জায়গায় গুছিয়ে লেখার উপায়: :is(h1, h2, h3) a মানে “h1, h2 বা h3-এর ভেতরের লিংক”। দুটোই Baseline Widely available — সব আধুনিক ব্রাউজারে বহু বছর ধরে চলে। :has()-ও (পর্ব ৩৪-এ বিস্তারিত) specificity-র হিসাবে :is()-এর মতো আচরণ করে। পার্থক্য শুধু ওজনে, আর সেই পার্থক্যই বড় প্রজেক্টে বিশাল প্রভাব ফেলে। ধরুন একটি library-র CSS আপনি নিজের সাইটে যোগ করেছেন:

/* library-র বেস স্টাইল */
:is(#site-header, .menu) a {
  color: gray;
  margin-right: 12px;
  font-size: 18px;
}

/* আপনার নিয়ম: বর্তমান পাতার লিংক লাল আর মোটা */
.active { color: crimson; font-weight: bold; }

৫ · Layer, scope, লেখার ক্রম আর inline style

@layer — নিয়মের তাক

একটি বড় দোকানের গুদামের কথা ভাবুন। নিচের তাকে সাধারণ মাল, মাঝের তাকে বিশেষ মাল, ওপরের তাকে আজকের অফারের মাল। দোকানি ঠিক করে রেখেছেন, কাউন্টারে আগে ওপরের তাকের জিনিস যাবে — মাল কত দামি, তা বিবেচ্য নয়। @layer CSS-এ ঠিক এই কাজটি করে: কোন দল নিয়ম কোন দলের ওপরে থাকবে, সেটা আপনি আগেই ঘোষণা করেন, আর specificity-র হিসাব শুধু একই layer-এর ভেতরে চলে।

/* তাকের ক্রম ঘোষণা: আগে base, পরে components */
@layer base, components;

@layer components {
  #buy.btn.primary { background: gray; }   /* (1,2,0) */
}
@layer base {
  button { background: orange; }           /* (0,0,1) */
}

/* কোনো layer-এ নেই */
button { background: seagreen; }

button { color: white; padding: 10px 18px; border: 0; border-radius: 8px; font-size: 18px; }

সাধারণ declaration-এ নিয়ম: পরে ঘোষিত layer জেতে, আর layer-এর বাইরের CSS সবার ওপরে। !important-এ এটিও উল্টে যায় — আগে ঘোষিত layer-এর important জেতে, আর layer-এর ভেতরের important layer-বিহীন important-কে হারায়। উৎসের বেলায় যে যুক্তি ছিল, এখানেও তাই: যে নিচের স্তরে আছে, সে যদি “এটা জরুরি” বলে, তাকে রক্ষা করা হয়। @layer ২০২২ সালে প্রধান তিন ব্রাউজারে প্রায় একসাথে এসেছে, এখন Baseline Widely available. Reset, theme, component আর utility CSS গুছিয়ে রাখার পুরো কৌশল দেখবেন পর্ব ৩৫-এ।

@scope — কতটা কাছে (সংক্ষেপে)

@scope (.card) { … } লিখলে ভেতরের নিয়মগুলো শুধু .card-এর ভেতরে খাটে। দুটি scope-এর নিয়ম একই element-এ মিললে, আর specificity সমান হলে, যে scope-এর মূল element সবচেয়ে কাছে, সে জেতে — এটাই সিঁড়ির পঞ্চম ধাপ। একটি .dark থিমের ভেতরে .light কার্ড, তার ভেতরে আবার .dark বক্স — এমন জায়গায় “সবচেয়ে কাছের থিম জিতবে” স্বাভাবিকভাবেই কাজ করে। @scope নতুন: Chromium আর Safari-তে আগে এসেছে, Firefox-এ এসেছে সাম্প্রতিক সময়ে — পুরোনো ব্রাউজারে নেই, তাই ব্যবহারের আগে Can I use দেখে নিন। বিস্তারিত পর্ব ৩৭-এ।

লেখার ক্রম — শেষ বিচারক

সব সমান হলে পরে আসা declaration জেতে। “পরে” মানে ব্রাউজার যে ক্রমে CSS পড়ে: <head>-এ ওপর থেকে নিচে <link> আর <style>, প্রতিটির ভেতরে ওপর থেকে নিচে, @import করা ফাইল ঠিক সেই জায়গায়। তাই একটি library-র CSS ফাইল আপনার নিজের ফাইলের পরে link করলে, সমান specificity-র লড়াইয়ে library জিতবে — নতুনদের খুব পরিচিত বিভ্রান্তি। নিজের ফাইল সবসময় শেষে রাখুন।

Inline style — শক্ত, কিন্তু অভ্যাস নয়

style="…" attribute-এ লেখা declaration সিঁড়ির দ্বিতীয় ধাপে বসে, তাই সাধারণ stylesheet-এর কোনো selector তাকে হারাতে পারে না — শুধু stylesheet-এর !important পারে। পুরোনো বইয়ে একে বলা হতো “specificity (1,0,0,0)”, অর্থাৎ id-রও ওপরে একটি চতুর্থ ঘর। এখনকার স্পেসিফিকেশন একে আলাদা ধাপ হিসেবে বর্ণনা করে, তবে ফল একই। সমস্যা হলো, inline style পুনরায় ব্যবহার করা যায় না, media query (পর্ব ৩১) বা :hover লেখা যায় না, আর বদলাতে হলে প্রতিটি HTML পাতা খুঁজতে হয়। তাই এটি মূলত JavaScript দিয়ে চলমান মান বসানোর জন্য (যেমন একটি progress bar-এর প্রস্থ), বা ইমেইলের HTML-এর মতো বিশেষ জায়গার জন্য।

৬ · Inheritance — বাবা-মা থেকে সন্তানে

এতক্ষণ দেখেছি, একটি element-এ সরাসরি লাগা কয়েকটি নিয়মের লড়াই। কিন্তু যদি কোনো নিয়মই সরাসরি না লাগে? ধরুন আপনি শুধু body { color: navy; } লিখলেন। পাতার প্রতিটি p, li, strong নীল হয়ে যায় — অথচ তাদের কারও জন্য আপনি কিছু লেখেননি। এটাই inheritance: কিছু property-র মান parent element থেকে child-এ, সেখান থেকে তার child-এ, এভাবে নিচে নামতে থাকে।

কোন property উত্তরাধিকারী, তা মুখস্থ করার দরকার নেই — MDN-এ প্রতিটি property-র পাতার নিচে “Inherited: yes/no” লেখা থাকে। সাধারণ বুদ্ধিও কাজ করে: body-তে বর্ডার দিলে পাতার প্রতিটি অনুচ্ছেদ, প্রতিটি শব্দের চারপাশে বর্ডার এলে কী বিশৃঙ্খলা হতো, ভাবুন। এবার উত্তরাধিকার কীভাবে নিচে নামে, আর কোথায় থেমে যায়, ধাপে ধাপে দেখুন:

body {
  color: navy;
  font-family: system-ui, sans-serif;
  border: 2px solid navy;
}

color: navy          ← body থেকে উত্তরাধিকার
font-family: system-ui ← body থেকে উত্তরাধিকার
border: none         ← নামেনি; নিজের প্রাথমিক মান

.note { color: crimson; }

color: crimson       ← নিজের rule উত্তরাধিকারকে হারায়
font-family: system-ui ← এখনো উত্তরাধিকার

color: crimson       ← p থেকে, body থেকে নয়
font-weight: bold    ← ব্রাউজারের stylesheet: strong { font-weight: bold }

/* ব্রাউজারের user-agent stylesheet */
a:link { color: LinkText; }   (সাধারণত নীল)

color: LinkText      ← সরাসরি লাগা rule, যত দুর্বলই হোক,
                       উত্তরাধিকারকে হারায়

এবার নিজে দেখুন। নিচের কার্ডে রং, ফন্ট আর বর্ডার শুধু .card-এ দেওয়া আছে:

<style>
  .card {
    color: #1e3a8a;
    font-family: Georgia, serif;
    font-size: 18px;
    border: 2px solid #1e3a8a;
    padding: 12px;
  }
</style>

<div class="card">
  <p>এই লেখা রং আর ফন্ট পেয়েছে উত্তরাধিকারে — বর্ডার পায়নি।</p>
  <a href="#more">লিংকের রং কিন্তু আলাদা</a>
  <p><button type="button">বাটনের ফন্টও আলাদা</button></p>
</div>

৭ · inherit, initial, unset, revert — নিয়ন্ত্রণ আপনার হাতে

CSS-এ কয়েকটি বিশেষ মান আছে যা যেকোনো property-তে লেখা যায়। এদের বলে CSS-wide keyword. এরা কোনো রং বা মাপ বলে না, বলে “মানটা কোথা থেকে আনব”:

সবচেয়ে বেশি গুলিয়ে যায় initial আর revert. “Initial” শুনে মনে হয় “শুরুর অবস্থা, যেমন CSS ছাড়া দেখায়”। কিন্তু CSS ছাড়া পাতার যে চেহারা, সেটা আসে ব্রাউজারের stylesheet থেকে — আর initial সেটাকেও ফেলে দেয়, যায় স্পেসিফিকেশনের একদম কাঁচা মানে। revert ফেরে ব্রাউজারের ডিফল্টে। লিংকে প্রয়োগ করলে পার্থক্য চোখে পড়ে:

<style>
  .box { color: crimson; border: 2px dashed crimson; padding: 8px; }
  .box a { color: green; display: block; margin: 4px 0; }

  .box .k1 { color: inherit; }
  .box .k2 { color: initial; }
  .box .k3 { color: unset; }
  .box .k4 { color: revert; }
</style>

<div class="box">
  <a href="#t0">কোনো keyword নেই — সবুজ</a>
  <a href="#t1" class="k1">inherit — parent-এর লাল</a>
  <a href="#t2" class="k2">initial — color-এর প্রাথমিক মান</a>
  <a href="#t3" class="k3">unset — color উত্তরাধিকারী, তাই inherit</a>
  <a href="#t4" class="k4">revert — ব্রাউজারের লিংকের রং</a>
</div>

৮ · !important-এর দুর্গন্ধ আর DevTools দিয়ে গোয়েন্দাগিরি

কেন !important একটি “smell”

প্রোগ্রামিংয়ে “code smell” বলে একটি কথা আছে — এমন চিহ্ন, যা নিজে ভুল নয়, কিন্তু দেখলেই সন্দেহ হয় গভীরে কোথাও সমস্যা আছে। রান্নাঘর থেকে পোড়া গন্ধ এলে আগুন নাও লাগতে পারে, কিন্তু উঠে দেখতে হয়। CSS-এ !important ঠিক তেমন। কেউ যখন লেখেন color: red !important, প্রায়ই আসল কথাটা হলো “কেন আমার নিয়ম হারছে, বুঝতে পারছি না, তাই জোর খাটালাম”। এতে এখনকার সমস্যা চাপা পড়ে, কিন্তু তিনটি নতুন সমস্যা তৈরি হয়:

• পরে বদলানো কঠিন: ওই রং কোনো এক পাতায় বদলাতে হলে আরেকটি !important লাগবে, আরও ভারী selector-সহ।
• উদ্দেশ্য হারিয়ে যায়: ছয় মাস পর কেউ বুঝবে না কোনটি সত্যিই জরুরি ছিল, কোনটি তাড়াহুড়োর জোড়াতালি।
• পাঠকের ক্ষতি হতে পারে: লেখার মাপ, লাইনের ফাঁক বা রঙে author !important থাকলে, যাঁরা নিজের প্রয়োজনে extension বা user CSS দিয়ে এগুলো বদলান, তাঁদের সাধারণ নিয়ম হেরে যায়। WCAG 2.2-এর “Text Spacing” নিয়ম (১.৪.১২) চায় পাঠক লাইন আর অক্ষরের ফাঁক বাড়ালেও লেখা যেন ভেঙে না যায়।

তবে !important নিষিদ্ধ নয় — কয়েকটি জায়গায় এটি একদম সঠিক হাতিয়ার:

• Utility class: .hidden { display: none !important; } — যে class-এর একমাত্র কাজ একটি জিনিস নিশ্চিত করা, সেখানে এটি উদ্দেশ্যই বলে দেয়। Bootstrap-এর মতো framework তাদের utility class-এ এভাবেই !important ব্যবহার করে (পর্ব ৪৬, ৫১)।
• পাঠকের নিজের stylesheet: user stylesheet-এ !important লেখা পাঠকের অধিকার — এর জন্যই ক্রমটা উল্টানো।
• যা বদলানোর উপায় নেই: কোনো third-party widget যদি HTML-এ inline style বসায়, আর সেটা আপনি বদলাতে না পারেন, stylesheet থেকে শুধু !important-ই পারে।
• Reduced motion-এর নিরাপত্তা জাল: @media (prefers-reduced-motion: reduce)-এর ভেতরে সব animation প্রায় শূন্য করে দেওয়ার পরিচিত কোডে !important থাকে, যাতে কোনো component-ই বাদ না পড়ে (পর্ব ৪৫)।

DevTools-এর Styles আর Computed ট্যাব

“আমার CSS কাজ করছে না” — এই সমস্যার বেশিরভাগ উত্তর DevTools-এ এক মিনিটে পাওয়া যায় (পর্ব ২-এ DevTools খোলা শিখেছেন; পুরো debugging-এর পর্ব ৪৭)। element-এর ওপর ডান-ক্লিক করে Inspect চাপুন, তারপর Elements প্যানেলের পাশে দেখুন:

Styles
element.style {                       ← inline style, সবার ওপরে
}
#offer {                         style.css:12
    color: navy;
}
.price {                          style.css:4
    color: green;                     ← কাটা দাগ: হেরেছে
    font-weight: bold;
}
p {                         user agent stylesheet
    display: block;
    margin-block-start: 1em;
}
Inherited from div.card
.card {                          style.css:1
    font-family: Georgia, serif;
    border: 2px solid;                 ← ফিকে: উত্তরাধিকারী নয়
}

• ক্রম: Styles প্যানেল rule-গুলো জয়ের ক্রমে সাজায় — ওপরেরটি সবচেয়ে শক্ত। একদম ওপরে element.style মানে inline style.
• কাটা দাগ (strikethrough): যে declaration হেরেছে, তার ওপর দাগ। কেন হারল বুঝতে, একই property ওপরের কোন rule-এ আছে খুঁজুন। পাশে হলুদ সতর্ক চিহ্নসহ কাটা দাগ মানে ভিন্ন সমস্যা — property-র নাম বা মান ভুল, ব্রাউজার বুঝতেই পারেনি।
• “Inherited from …”: নিচের অংশে parent-দের rule, যেখান থেকে উত্তরাধিকার আসছে। উত্তরাধিকারী নয় এমন property সেখানে ফিকে দেখায়।
• Specificity দেখা: Chrome আর Edge-এর নতুন সংস্করণে selector-এর ওপর মাউস রাখলে তার specificity (a, b, c) আকারে দেখায়; layer থাকলে rule-এর ওপরে layer-এর নামও দেখায়।
• Computed ট্যাব: element-এর প্রতিটি property-র চূড়ান্ত মান। একটি property-র পাশের তীর খুললে দেখায় কোন কোন declaration লড়েছিল আর কে জিতল, কোন ফাইলের কোন লাইনে। “আসলে কী মান বসেছে” প্রশ্নের সরাসরি উত্তর এখানে।

DevTools যে হিসাব দেখায়, তার কিছুটা আমরা নিজেও করতে পারি। নিচের স্ক্রিপ্টে একটি ছোট specificity-গণক আছে — সাধারণ selector-এর জন্য (জটিল, নেস্টেড বন্ধনী সে বোঝে না)। আর শেষে getComputedStyle() দিয়ে ব্রাউজারের কাছ থেকে চূড়ান্ত মান পড়া হচ্ছে:

function cmp(p, q) { return p[0] - q[0] || p[1] - q[1] || p[2] - q[2]; }
function spec(sel) {
  let a = 0, b = 0, c = 0;
  let s = sel.replace(/:where\([^)]*\)/g, ' ');            // ওজন শূন্য
  s = s.replace(/:(?:is|not|has)\(([^)]*)\)/g, (m, inner) => {
    const best = inner.split(',').map(x => spec(x.trim())).sort(cmp).pop();
    a += best[0]; b += best[1]; c += best[2]; return ' ';   // সবচেয়ে ভারীটি
  });
  s = s.replace(/\[[^\]]*\]/g, () => { b++; return ' '; });          // [attr]
  s = s.replace(/::[\w-]+/g, () => { c++; return ' '; });            // ::before
  s = s.replace(/#[\w-]+/g, () => { a++; return ' '; });             // #id
  s = s.replace(/\.[\w-]+/g, () => { b++; return ' '; });            // .class
  s = s.replace(/:[\w-]+(\([^)]*\))?/g, () => { b++; return ' '; }); // :hover
  s.replace(/[a-z][\w-]*/gi, () => { c++; return ''; });             // type
  return [a, b, c];
}
const sels = ['p', 'ul li.sale', '#cart .item:hover', 'li:nth-child(2n+1)',
  ':is(#main, .box) p', ':where(#main, .box) p', '.card:not(.sold, #x) > *'];
for (const x of sels) console.log(x, '->', '(' + spec(x).join(', ') + ')');

const cs = getComputedStyle(document.querySelector('#msg'));
console.log('color:', cs.color, '| font-size:', cs.fontSize);

৯ · AI-এর যুগে cascade বোঝার মূল্য

AI টুলকে “বাটনের রং বদলে দাও” বললে সে প্রায় সবসময়ই এমন CSS দেয়, যা তার কল্পনার একটি খালি পাতায় কাজ করে। কিন্তু আপনার আসল সাইটে আছে Bootstrap বা অন্য কোনো library, আগের ডেভেলপারের লেখা ফাইল, CMS-এর থিম। AI সেই cascade দেখতে পায় না। ফলে তার কোড “কাজ করছে না”, আর পরের প্রম্পটে সে সমাধান দেয় সবচেয়ে সহজটা — !important.

AI সাধারণত যেসব cascade-ভুল করে

AI-এর দেওয়া CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• নতুন CSS-এ কোনো !important থাকলে প্রতিটির কারণ বলতে পারি — না পারলে মুছে দিয়ে আসল কারণ খুঁজেছি
• প্রতিটি নতুন selector-এর specificity হাতে হিসাব করেছি; কোনোটিতে অকারণ #id বা চার-পাঁচ ধাপের লম্বা শিকল নেই
• DevTools-এর Styles প্যানেলে দেখেছি আমার declaration সত্যিই জিতেছে (কাটা দাগ নেই), আর Computed ট্যাবে চূড়ান্ত মান মিলিয়েছি
• নিজের CSS ফাইল library-র ফাইলের পরে link করা আছে কি না, আর @layer থাকলে তার ক্রম দেখেছি
• সন্দেহ হলে MDN-এ property-র “Inherited” তথ্য আর Can I use-এ নতুন feature-এর (@scope, :has()) সাপোর্ট দেখেছি; W3C CSS validator আর Lighthouse চালিয়েছি