CSS architecture — BEM, utility class আর বড় প্রজেক্টে গোছানো CSS

১ · বড় প্রজেক্টে CSS কেন এলোমেলো হয়

একটি ছোট দোকানের ওয়েবসাইট শুরু হয় এক পাতা দিয়ে, CSS ফাইলে পঞ্চাশ লাইন। সব পরিষ্কার। তারপর আসে পণ্যের পাতা, কার্ট, অফারের ব্যানার, ঈদের থিম, মোবাইল মেনু। দুই বছরে তিনজন ডেভেলপার কাজ করে চলে গেছেন, CSS ফাইল এখন পাঁচ হাজার লাইন। নতুন একটি বোতামের রং বদলাতে গিয়ে আপনি দেখলেন, চেকআউট পাতার একটি লেখা হঠাৎ লাল হয়ে গেছে। কেউ জানে না কেন।

এটি কোনো একজনের অযোগ্যতা নয় — CSS-এর নকশার মধ্যেই কয়েকটি বৈশিষ্ট্য আছে, যা বড় প্রজেক্টে সমস্যা তৈরি করে। CSS architecture মানে এই সমস্যাগুলো মাথায় রেখে CSS লেখার একটি পরিকল্পিত পদ্ধতি — নাম রাখার নিয়ম, ফাইল সাজানোর নিয়ম, আর কোন নিয়ম কোথায় বসবে তার সিদ্ধান্ত।

প্রথম সমস্যাটি নিজের চোখে দেখুন। রাফি তিন মাস আগে সাইটের শিরোনামের জন্য .title বানিয়েছিলেন। মিম আজ পণ্যের কার্ডে নামের জন্য একই নাম দিলেন — দুজনেই নিজের ফাইলে, দুজনেই ঠিক কাজ করছেন বলে ভাবছেন:

/* রাফির ফাইল — header.css */
.title {
  font-size: 34px;
  color: navy;
}

/* মিমের ফাইল — product.css (তিন মাস পরে) */
.title {
  font-size: 18px;
  color: darkgreen;
}

.product {
  border: 1px solid #ccc;
  padding: 12px;
  margin-top: 12px;
}

২ · ভালো CSS-এর তিন নীতি

BEM, ITCSS বা Tailwind — যেকোনো পদ্ধতির নিচে একই কয়েকটি চিন্তা কাজ করে। পদ্ধতির নাম ভুলে গেলেও এই তিনটি মনে রাখলে আপনার CSS অনেকখানি গোছানো থাকবে।

এর সাথে দুটি অভ্যাস যোগ করুন। প্রথমত, নাম রাখুন কাজ দেখে, চেহারা দেখে নয় — .price ভালো, .green-big খারাপ (পর্ব ১৭-এ এর কারণ দেখেছেন)। দ্বিতীয়ত, CSS যেন HTML-এর গঠনের ওপর বেশি নির্ভর না করে। .sidebar div > ul li:first-child a লিখলে HTML-এ একটি <div> যোগ করলেই নকশা ভাঙে। একটি class সরাসরি element-এ থাকলে HTML-এর গঠন বদলালেও স্টাইল বদলায় না।

৩ · BEM — block__element--modifier

BEM তৈরি হয়েছিল রাশিয়ার Yandex কোম্পানিতে, আর ২০১০ সালের আশেপাশে বাইরের দুনিয়ায় ছড়িয়ে পড়ে। নামটি তিনটি শব্দের আদ্যক্ষর:

দেখতে একটু অদ্ভুত লাগে — দুটি underscore, দুটি hyphen. কিন্তু এর লাভ বিশাল: HTML-এ class="card__price" দেখামাত্র বোঝা যায় এটি card-এর ভেতরের দাম, আর CSS ফাইলে কোথায় খুঁজতে হবে। নিচের ডায়াগ্রামে একটি সাধারণ, এলোমেলো কার্ডকে ধাপে ধাপে BEM-এ বদলে দেখুন:

<div class="products">
  <div class="sale">
    <h3>জামদানি শাড়ি</h3>
    <p><span>৳ ৩,৫০০</span></p>
  </div>
</div>

.products div h3        { … }   /* (0,1,2) */
.products div p span    { … }   /* (0,1,3) */
.products .sale p span  { … }   /* (0,2,2) */

<article class="card"> … </article>

.card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}   /* কোথায় বসবে (margin, grid) তা এখানে নয় */

<article class="card">
  <h3 class="card__title">জামদানি শাড়ি</h3>
  <p class="card__price">৳ ৩,৫০০</p>
  <button class="card__button">কার্টে যোগ করুন</button>
</article>

.card__title  { … }   /* nested নয় — সরাসরি এক class */
.card__price  { … }

<article class="card card--sale">   ← block-এর class থাকে, পাশে modifier

.card--sale              { border-color: crimson; }
.card__price--old        { text-decoration: line-through; }

.card              (0,1,0)
.card__title       (0,1,0)
.card__price       (0,1,0)
.card--sale        (0,1,0)
h3 → h2 বদলালেও, div যোগ করলেও — কিছু ভাঙে না

এবার নিজের হাতে BEM কার্ড চালিয়ে দেখুন। দুটি কার্ড — একটি সাধারণ, একটি ছাড়ের:

.card {
  max-width: 260px;
  padding: 16px;
  margin-block-end: 12px;
  border: 2px solid #ddd;
  border-radius: 12px;
}
.card__title  { margin: 0 0 4px; font-size: 20px; }
.card__price  { margin: 0 0 12px; font-weight: bold; }
.card__button {
  padding: 8px 14px;
  border: 0;
  border-radius: 8px;
  background: teal;
  color: white;
}

/* Modifier — শুধু যা আলাদা */
.card--sale        { border-color: crimson; }
.card__price--old  { color: gray; font-weight: normal; }

BEM-এর সাধারণ ভুল

• নাতি-নাতনির নাম: .card__body__title নয়। BEM-এ element সবসময় সরাসরি block-এর নামে — .card__title, HTML-এ সে যত গভীরেই থাকুক। নাম HTML-এর গাছ নকল করলে গঠন বদলালেই নামও বদলাতে হয়।
• শুধু modifier, block ছাড়া: class="card--sale" একা দিলে মূল কার্ডের স্টাইলই আসবে না। লিখুন class="card card--sale".
• Modifier-এর ভেতরে element বদলানো: .card--sale .card__price { color: crimson; } চলে, আর BEM-এর নিয়মেও অনুমোদিত — তবে ওজন (0,2,0). কম ব্যবহার করুন, আর যেখানে করবেন, জেনেশুনে করুন।
• বড় block-এর ভেতরে আরেকটি block: কার্ডের ভেতরের বোতাম যদি সাইটের সাধারণ বোতাম হয়, তাকে card__button না বলে আলাদা block .button বানান। একটি element-এ দুই ভূমিকা একসাথেও দেওয়া যায়: class="button card__button" — একে বলে mix; .button চেহারা দেয়, .card__button কার্ডের ভেতরে অবস্থান।

বাংলা প্রজেক্টে নাম — লেখা বাংলায়, কোড ইংরেজিতে

CSS-এর নিয়মে class-এর নামে Unicode অক্ষর চলে — .দাম { color: red; } আধুনিক ব্রাউজারে কাজও করবে। তবু পেশাদার প্রজেক্টে class, id, ফাইল আর ফোল্ডারের নাম রাখুন ছোট হাতের ইংরেজি ASCII অক্ষরে (kebab-case, BEM-এর __ আর -- সহ)। কারণগুলো বাস্তব:

• কোড লেখার সময় বারবার বাংলা-ইংরেজি কিবোর্ড বদলাতে হয়, আর য়, ড়-এর মতো কিছু অক্ষর একাধিক Unicode উপায়ে লেখা যায় (পর্ব ১৪-এ দেখেছেন) — চোখে এক, কম্পিউটারের কাছে আলাদা নাম।
• অনেক টুল, linter আর পুরোনো build script ASCII ধরে নিয়ে বানানো; বিদেশি সহকর্মী বা ওপেন-সোর্স অবদানকারীও নাম পড়তে পারেন না।
• রোমান হরফে বাংলা (.dam, .kinun-btn) আরও খারাপ — বানানের কোনো নির্দিষ্ট নিয়ম নেই, একজন লেখেন dam, আরেকজন daam.

নিয়মটি সহজ: মানুষ যা পড়বে, তা বাংলায়; কম্পিউটার যা পড়বে, তা ইংরেজিতে। বোতামের লেখা “কার্টে যোগ করুন”, class-এর নাম card__button. CSS-এর মন্তব্য অবশ্য বাংলায় লিখতে পারেন — দলের সবাই বাংলাভাষী হলে সেটাই সবচেয়ে পরিষ্কার।

৪ · OOCSS আর SMACSS — কাঠামো, রং আর ভূমিকা আলাদা করা

BEM বলে নাম কীভাবে রাখবেন। কিন্তু কোন অংশকে আলাদা class বানাবেন, সেই প্রশ্নের উত্তর দেয় আরও দুটি পুরোনো, প্রভাবশালী চিন্তা।

OOCSS — একই কাঠামো, ভিন্ন চামড়া

২০০০-এর দশকের শেষ দিকে Nicole Sullivan প্রস্তাব করেন OOCSS (Object-Oriented CSS). তাঁর দুটি মূল কথা: কাঠামো (structure) আর রূপ (skin) আলাদা রাখুন, আর ধারক (container) আর ভেতরের জিনিস (content) আলাদা রাখুন — অর্থাৎ একটি বস্তু কোথায় বসেছে তার ওপর তার চেহারা নির্ভর করবে না। তাঁর সবচেয়ে বিখ্যাত উদাহরণ media object: বাঁয়ে একটি ছবি, ডানে লেখা। মন্তব্য, অর্ডারের নোটিফিকেশন, প্রোফাইল — ওয়েবের অসংখ্য জায়গায় এই একই কাঠামো:

/* Structure — কাঠামো, একবারই লেখা */
.media { display: flex; gap: 12px; align-items: flex-start;
         padding: 12px; margin-block-end: 8px; }
.media-figure { flex: none; inline-size: 48px; block-size: 48px;
                border-radius: 50%; display: grid; place-items: center;
                font-size: 24px; background: #eee; }
.media-body { flex: 1; }
.media-body p { margin: 4px 0 0; }

/* Skin — রূপ, আলাদা class-এ */
.skin-soft   { background: #eef6f6; border-radius: 10px; }
.skin-alert  { background: #fff1f0; border-inline-start: 4px solid crimson; }
.skin-avatar { background: teal; color: white; }

SMACSS — প্রতিটি নিয়মের একটি বিভাগ

২০১১ সালে Jonathan Snook একটি বই লেখেন SMACSS (Scalable and Modular Architecture for CSS) নামে। তাঁর মূল প্রস্তাব: প্রতিটি CSS নিয়ম পাঁচটি বিভাগের কোনো একটিতে পড়ে, আর প্রতিটি বিভাগের লেখার নিয়ম আলাদা।

SMACSS-এর সবচেয়ে টেকসই উপহার হলো state class-এর is- উপসর্গ। .is-open দেখলেই বোঝা যায়, এই class JavaScript বা ব্যবহারকারীর কাজে বসে-ওঠে। আজকের অ্যাক্সেসিবল কোডে আরও ভালো পথ প্রায়ই আছে: অবস্থা যদি ARIA-তেও প্রকাশ করতে হয়, তাহলে সরাসরি সেটিকেই selector বানান — [aria-expanded="true"], [aria-current="page"], অথবা :checked, :user-invalid, [open]. তাহলে চেহারা আর screen reader-এর তথ্য কখনো আলাদা হয়ে যায় না (পর্ব ১২ আর ৩৪)।

৫ · ITCSS — উল্টো ত্রিভুজ, আর আজকের @layer

২০১৪-১৫ সালের দিকে Harry Roberts একটি মডেল প্রচার করেন, নাম ITCSS — Inverted Triangle CSS. ধারণাটি একটি ছবিতেই ধরা যায়: একটি উল্টো ত্রিভুজ, ওপরে চওড়া, নিচে সরু। ওপরের নিয়ম পাতার অনেক element-কে ছোঁয় কিন্তু খুব দুর্বল; নিচের নিয়ম অল্প কয়েকটি element-কে ছোঁয় কিন্তু খুব স্পষ্ট ও শক্তিশালী। CSS ফাইল সাজানো হয় ঠিক এই ক্রমে — ওপর থেকে নিচে।

:root {
  --color-brand: #0a7d6e;
  --space-m: 1rem;
}   /* Sass-এর যুগে এখানে $variable থাকত */

// শুধু Sass-জাতীয় টুলে — নিজে কোনো CSS তৈরি করে না
@mixin focus-ring { outline: 3px solid var(--color-brand); }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }

body { font-family: "Hind Siliguri", system-ui, sans-serif; line-height: 1.6; }
a    { color: var(--color-brand); }

.o-stack > * + * { margin-block-start: var(--space-m); }
.o-cluster      { display: flex; flex-wrap: wrap; gap: var(--space-m); }

.c-card        { padding: 1rem; border-radius: 12px; }
.c-card__title { font-size: 1.25rem; }

.u-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px;
                     overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.u-text-center     { text-align: center !important; }  /* @layer-এর আগের যুগের কৌশল */

ITCSS-এর সমস্যা ছিল একটাই: ক্রম রক্ষা হতো শুধু মানুষের শৃঙ্খলায় — ফাইল ঠিক ক্রমে @import করা, আর কারও selector যেন নিচের স্তরের চেয়ে ভারী না হয়। পর্ব ৩৫-এ দেখা @layer এই ক্রমকে ব্রাউজারের নিয়মে পরিণত করে: পরের layer জেতে, selector যত ভারী হোক। @layer এখন Baseline Widely available, অর্থাৎ সব আধুনিক ব্রাউজারে নিশ্চিন্তে চলে।

@layer settings, generic, elements, objects, components, utilities;

@layer settings {
  :root { --brand: teal; --space: 12px; }
}
@layer generic {
  *, *::before, *::after { box-sizing: border-box; }
}
@layer elements {
  button { font: inherit; padding: 8px 16px; }
}
@layer objects {
  .cluster { display: flex; flex-wrap: wrap; gap: var(--space); }
}
@layer components {
  .nav .btn { background: var(--brand); color: white;
              border: 0; border-radius: 8px; }  /* (0,2,0) */
}
@layer utilities {
  .bg-danger { background: crimson; }            /* (0,1,0) */
}

৬ · Utility-first বনাম semantic class — সৎ তুলনা

এ পর্যন্ত সব পদ্ধতির ভিত্তি এক: HTML-এ অর্থবহ নাম (.card), চেহারার বিস্তারিত CSS ফাইলে। ২০১০-এর দশকে আরেকটি ধারা জোর পায়, যা প্রায় উল্টো দিকে হাঁটে — utility-first বা atomic CSS. এখানে প্রতিটি class একটি ছোট কাজ করে (.flex, .p-4, .rounded-lg), আর নকশা তৈরি হয় সরাসরি HTML-এ class জুড়ে জুড়ে। ২০১৩ সালে Yahoo-র Thierry Koblentz-এর লেখা “Challenging CSS Best Practices” এই চিন্তাকে আলোচনায় আনে; ২০১৭ সালে Adam Wathan-এর Tailwind CSS একে মূলধারায় নিয়ে আসে। নিচে Tailwind-এর ধাঁচে নিজেদের ছোট্ট একটি সংগ্রহ বানিয়ে দেখুন:

<style>
  /* ছোট্ট একটি utility সংগ্রহ — প্রতিটি class একটি কাজ */
  .flex { display: flex; }        .items-center { align-items: center; }
  .gap-3 { gap: 12px; }           .p-4 { padding: 16px; }
  .border { border: 1px solid #ddd; }  .rounded-lg { border-radius: 12px; }
  .m-0 { margin: 0; }             .font-bold { font-weight: 700; }
  .text-sm { font-size: 14px; }   .text-gray { color: #555; }
  .bg-teal { background: teal; }  .text-white { color: white; }
  .max-w-xs { max-width: 340px; }
</style>

<article class="flex items-center gap-3 p-4 border rounded-lg max-w-xs">
  <div class="p-4 rounded-lg bg-teal text-white font-bold">চা</div>
  <div>
    <h3 class="m-0">ঢাকা টি স্টল</h3>
    <p class="m-0 text-sm text-gray">খোলা: সকাল ৭টা – রাত ১১টা</p>
  </div>
</article>

সৎ উত্তর হলো — কোনোটিই সব জায়গায় সেরা নয়। React, Vue বা Svelte-এর মতো component-ভিত্তিক প্রজেক্টে, যেখানে একটি কার্ড একবারই লেখা হয়, utility-first খুব দ্রুত আর টেকসই। বহু-পাতার সাধারণ সাইট, CMS-এর লেখা বা যেখানে HTML বারবার হাতে কপি হয়, সেখানে semantic class প্রায়ই ভালো। বাস্তবে বেশিরভাগ দল মেশায়: component-এর জন্য অর্থবহ class, ছোটখাটো ভিন্নতার জন্য অল্প কিছু utility. Tailwind-এর খুঁটিনাটি, build-এর ধাপ আর Bootstrap-এর সাথে তুলনা পর্ব ৫১-এ।

CUBE CSS — মাঝামাঝি একটি পথ

২০২০ সালে Andy Bell এই দুই ধারা মিলিয়ে প্রস্তাব করেন CUBE CSS — Composition, Utility, Block, Exception. ক্রমটিই দর্শন: আগে ব্রাউজারের স্বাভাবিক cascade আর inheritance-কে কাজ করতে দিন; তারপর Composition — চেহারাহীন layout-এর class (.flow, .cluster, .sidebar); Utility — token-ভিত্তিক ছোট class; Block — শুধু যা বাকি থাকে, তার জন্য component; আর Exception — অবস্থা বা ভিন্নতা, যা সাধারণত data- attribute-এ লেখা হয়:

<article class="card flow" data-state="reversed">  <!-- composition + block + exception -->
  <h3 class="card__title text-step-2">…</h3>      <!-- block + utility -->
</article>

<style>
  .flow > * + * { margin-block-start: var(--flow-space, 1em); }
  .card[data-state="reversed"] { background: var(--color-dark); color: var(--color-light); }
</style>

৭ · নামের বদলে scope — CSS Modules, framework আর @scope

BEM সংঘাত এড়ায় নামের শৃঙ্খলা দিয়ে — কিন্তু সবাইকে নিয়মটা মানতে হয়। আরেকটি পথ হলো যন্ত্রকেই বলা: “এই CSS শুধু এই component-এর ভেতরে খাটবে।” এই কাজ তিন জায়গায় হতে পারে — build টুলে, framework-এ, আর এখন ব্রাউজারেই।

/* Card.module.css — আপনি যা লেখেন */
.title { font-size: 20px; }

/* ব্রাউজার যা পায় (নামটি টুল বানায়) */
.Card_title__x7Gq2 { font-size: 20px; }

/* Vue-তে আপনি লেখেন */
.title { color: teal; }

/* তৈরি হয় প্রায় এরকম */
.title[data-v-7ba5bd90] { color: teal; }

@scope (.card) to (.card__slot) {
  .title { font-size: 20px; }   /* শুধু কার্ডের ভেতরের .title */
  img    { border-radius: 8px; }
}

খেয়াল করুন, scope নামের সংঘাত দূর করে, কিন্তু অন্য তিনটি সমস্যা (specificity-র যুদ্ধ, dead code, ফাইল সাজানো) নিজে থেকে সমাধান করে না। একটি সুবিধা অবশ্য বড়: CSS যখন component-এর ফাইলের পাশেই থাকে (co-location), component মুছলে তার CSS-ও মুছে যায় — “মুছতে ভয়” অনেকটা কমে।

৮ · ফাইল-ফোল্ডার, token, নথি আর Stylelint

পদ্ধতি বাছাই করলেন; এবার প্রজেক্টের কাঠামো। একটি সাধারণ, ITCSS আর @layer-এর সাথে মেলানো ফোল্ডার-সাজানো:

css/
├── main.css            ← শুধু @layer ক্রম আর @import
├── tokens/
│   ├── colors.css      ← --color-brand, --color-danger …
│   └── spacing.css     ← --space-s, --space-m …
├── base/
│   ├── reset.css
│   └── typography.css  ← body, h1–h6, a
├── layout/
│   ├── stack.css       ← .stack, .cluster, .sidebar-layout
│   └── site-header.css
├── components/
│   ├── card.css        ← .card, .card__title, .card--sale
│   ├── button.css
│   └── product-grid.css
└── utilities/
    └── utilities.css   ← .visually-hidden, .text-center

/* main.css */
@layer tokens, base, layout, components, utilities;

@import url("tokens/colors.css")      layer(tokens);
@import url("tokens/spacing.css")     layer(tokens);
@import url("base/reset.css")         layer(base);
@import url("base/typography.css")    layer(base);
@import url("layout/stack.css")       layer(layout);
@import url("components/card.css")    layer(components);
@import url("utilities/utilities.css") layer(utilities);

নিয়ম: এক component, এক ফাইল, ফাইলের নাম block-এর নামে। card.css-এ শুধু .card-এ শুরু হওয়া class থাকবে। তাহলে কোনো class কোথায় আছে, খুঁজতেই হয় না। একটি সতর্কতা: অনেকগুলো @import ব্রাউজারে একটির পর একটি ফাইল নামায়, তাই প্রকাশের আগে সাধারণত একটি build টুল সব ফাইল জুড়ে একটি ফাইল বানায় — এর বিস্তারিত পর্ব ৪৯ (পারফরম্যান্স) আর ৫০-এ (PostCSS). সব ফাইলের ওপরে থাকে token: পর্ব ৩৩-এ দেখেছেন, রূপ-ভিত্তিক token (--teal-600) থেকে কাজ-ভিত্তিক semantic token (--color-brand) বানালে থিম বদলানো একটি ফাইলের কাজ।

নথি: style guide আর pattern library

নামের নিয়ম মাথায় থাকলে চলবে না, লিখে রাখতে হবে। একটি ছোট style guide — এক পাতার README — বলবে: কোন পদ্ধতি (BEM), কোন উপসর্গ (is-, u-), কোন layer, id-তে স্টাইল নিষেধ, ইত্যাদি। বড় প্রজেক্টে এর সাথে থাকে একটি pattern library: প্রতিটি component-এর সব রূপ (সাধারণ, ছাড়, অক্ষম, লোড হচ্ছে) এক জায়গায় দেখানো জীবন্ত পাতা, পাশে ব্যবহারবিধি। সবচেয়ে প্রচলিত টুল Storybook, যেখানে প্রতিটি component আলাদাভাবে খুলে দেখা ও পরীক্ষা করা যায়। ছোট প্রজেক্টে একটি সাধারণ components.html পাতা — সব component পাশাপাশি — একই কাজ করে।

Stylelint আর Prettier — নিয়ম মানানোর পাহারাদার

মানুষ ভুলে যায়, টুল ভোলে না। Stylelint একটি CSS linter — কোড পড়ে নিয়মভঙ্গ খুঁজে বের করে: id-তে স্টাইল, অতিরিক্ত ভারী selector, !important, BEM-বিরোধী নাম, অচেনা property, দুবার লেখা নিয়ম। আর Prettier একটি formatter — ফাঁকা জায়গা, ইনডেন্ট, লাইন ভাঙা এক নিয়মে বসায়। দুটির কাজ আলাদা: Stylelint বলে “এটা ভুল”, Prettier বলে “এভাবে সাজাও”। Stylelint নিজেই এখন সাজানোর (stylistic) নিয়মগুলো বাদ দিয়ে সেই কাজ Prettier-এর মতো টুলের হাতে ছেড়ে দিয়েছে।

npm install --save-dev stylelint stylelint-config-standard prettier
npx stylelint "css/**/*.css"
npx prettier --write "css/**/*.css"

{
  "extends": ["stylelint-config-standard"],
  "rules": {
    "selector-max-id": 0,
    "selector-max-specificity": "0,3,0",
    "declaration-no-important": true,
    "selector-class-pattern": [
      "^[a-z][a-z0-9]*(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$",
      { "message": "class-এর নাম BEM ধাঁচে, ছোট হাতের ইংরেজিতে লিখুন" }
    ]
  }
}

এই .stylelintrc.json ফাইলটি ঠিক এই পর্বের নীতিগুলোকে নিয়মে বাঁধে: কোনো id নয়, তিন class-এর বেশি ভারী selector নয়, !important নয়, আর class-এর নাম BEM-এর ধাঁচে ASCII অক্ষরে — .দাম বা .cardTitle লিখলেই সতর্কবার্তা। (stylelint-config-standard-এর নিজের নাম-নিয়ম শুধু kebab-case মানে, BEM-এর __ মানে না — তাই আমরা নিয়মটি নিজের মতো বদলে দিয়েছি।) VS Code-এর Stylelint extension লেখার সময়ই লাল দাগ দেখায়, আর অনেক দল Git-এ কোড পাঠানোর আগে এগুলো স্বয়ংক্রিয়ভাবে চালায় (পর্ব ৫৩)। npm আর এই ধরনের টুল নিয়ে আরও জানতে দেখুন JavaScript কোর্সের npm পর্ব।

৯ · একটি এলোমেলো stylesheet ধাপে ধাপে গোছানো

বাস্তবে আপনি প্রায়ই শূন্য থেকে শুরু করবেন না — হাতে আসবে কারও পুরোনো, জট পাকানো CSS. সবকিছু একদিনে নতুন করে লেখার লোভ সামলান: বড় rewrite প্রায়ই নতুন বাগ আনে আর মাঝপথে থেমে যায়। নিরাপদ পথ হলো refactoring — চেহারা একটুও না বদলে, ছোট ছোট ধাপে ভেতরের কোড গোছানো। আগে সমস্যাটি দেখুন — একটি সাইডবারের CSS, যেখানে “active” লিংকটি রঙিন করার চেষ্টা চলছে:

#sidebar .widget h3 { color: #0a7d6e; font-size: 20px; margin: 0 0 8px; }
#sidebar .widget ul { list-style: none; padding: 0; margin: 0; max-width: 240px; }
#sidebar .widget ul li a {
  display: block; padding: 6px 10px;
  color: #333; text-decoration: none;
}
#sidebar .widget ul li a:hover { color: #0a7d6e; }

/* নতুন কাজ: active লিংক রঙিন — রং কাজ করে না! */
.active { background: #0a7d6e; color: white; }

/* তাই কেউ পরে লিখল… */
.active { color: white !important; }

.red-text { color: red; }   /* কোথায় লাগে? কেউ জানে না */

এই কোডে পর্ব শুরুর চারটি সমস্যাই আছে: id আর লম্বা শিকলের ভারী specificity, !important-এর যুদ্ধ, অজানা .red-text (dead code কি না কেউ জানে না), আর HTML-এর গঠনের ওপর নির্ভরতা। এটিকে নিরাপদে গোছানোর ধাপগুলো দেখুন:

/* জরিপের ফল */
id selector ............ 5
!important ............. 1
একই রং (#0a7d6e) ........ 3 বার
অজানা class ............ .red-text

:root {
  --color-brand: #0a7d6e;
  --color-text: #333;
}
#sidebar .widget h3 { color: var(--color-brand); … }

<div id="sidebar" class="sidebar">
  <section class="widget">
    <h3 class="widget__title">
    <ul class="widget__list">
      <a class="widget__link widget__link--active" …>

- #sidebar .widget ul li a { … }
+ .widget__link { … }            (1,1,3) → (0,1,0)
- .active { color: white !important; }
+ .widget__link--active { … }     !important আর লাগে না

$ grep -rn "red-text" --include=*.html --include=*.js .
(কোনো ফল নেই)
DevTools → Coverage: .red-text ব্যবহার হয়নি
→ মুছে ফেলা হলো

@layer tokens, components;
/* .stylelintrc.json */
"selector-max-id": 0,
"declaration-no-important": true   ← পুরোনো অভ্যাস আর ফিরতে পারবে না

এবার ফলাফল — একই চেহারা, কিন্তু পরিষ্কার ভেতর। HTML-এ BEM নাম, CSS-এ token, layer আর native nesting:

@layer tokens, components;

@layer tokens {
  :root { --color-brand: #0a7d6e; --color-text: #333; }
}

@layer components {
  .widget__title { color: var(--color-brand); font-size: 20px; margin: 0 0 8px; }
  .widget__list  { list-style: none; padding: 0; margin: 0; max-width: 240px; }
  .widget__link {
    display: block; padding: 6px 10px;
    color: var(--color-text); text-decoration: none;
    &:hover { color: var(--color-brand); }
  }
  .widget__link--active,
  .widget__link--active:hover {
    background: var(--color-brand);
    color: white;
  }
}

১০ · AI-এর যুগে — গোছানো CSS-এর জন্য AI-কে নির্দেশ

AI খুব দ্রুত CSS লেখে, কিন্তু প্রতিটি উত্তর আলাদাভাবে — আপনার প্রজেক্টের নামের নিয়ম, token বা layer সে জানে না, যদি না আপনি বলে দেন। ফলে দশটি প্রশ্নে দশ ধাঁচের CSS আসে: কোথাও .productCard, কোথাও .product-card, কোথাও #product; একই রং দশ জায়গায় হাতে লেখা। প্রতিটি উত্তর আলাদাভাবে “চলে”, কিন্তু একসাথে তারা ঠিক সেই জট পাকায়, যা নিয়ে এই পর্ব শুরু হয়েছিল। আর AI প্রায়ই নিজে থেকে div-এর স্তূপ বানায়, অবস্থা বোঝাতে শুধু class দেয় কিন্তু ARIA বা আসল element-এর কথা ভোলে।

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

• প্রতিটি class-এর নাম প্রজেক্টের নিয়মে (BEM, ছোট হাতের ইংরেজি); কোনো id selector বা !important নেই — Stylelint চালিয়ে নিশ্চিত হয়েছি
• কোনো hex রং বা মাপ হাতে লেখা নেই — সব token থেকে; নতুন token লাগলে সেটা আমার সিদ্ধান্ত
• নতুন class আগে থেকে থাকা কোনো class-এর সাথে নামে মেলে না — প্রজেক্টে search করে দেখেছি
• DevTools-এ দেখেছি নতুন নিয়ম ঠিক layer-এ আছে আর কোনো পুরোনো পাতার চেহারা বদলায়নি
• HTML validator.w3.org-এ আর Lighthouse-এ পরীক্ষা করেছি; নতুন CSS feature-এর অবস্থা MDN-এর Baseline চিহ্ন বা caniuse.com-এ মিলিয়েছি