Advance CSS শিখুন বাংলায় (পর্ব ২) — BEM Naming Convention দিয়ে CSS সংগঠিত করুন

আগের পর্বে আমরা SCSS দিয়ে CSS-কে আরও শক্তিশালী করা শিখেছিলাম। কিন্তু কোড যত বড় হয়, একটা নতুন সমস্যা দেখা দেয় — ক্লাস নাম নিয়ে গোলমাল। কোন ক্লাস কোথায় ব্যবহার হচ্ছে, কোনটা পাল্টালে অন্য জায়গায় প্রভাব পড়বে কিনা — এসব বোঝা কঠিন হয়ে যায়। এর সমাধান দেয় BEM (Block Element Modifier) নামকরণ পদ্ধতি।

সমস্যাটা কী?

ধরো তুমি এভাবে ক্লাস নাম দিলে:

<div class="card">
  <div class="title">শিরোনাম</div>
  <div class="button">বাটন</div>
</div>

এখন যদি পেজের অন্য কোথাও আরেকটা .title বা .button ক্লাস থাকে (হয়তো সম্পূর্ণ ভিন্ন প্রসঙ্গে), CSS-এর স্টাইল একে অপরের সাথে সংঘর্ষ করবে। বড় প্রজেক্টে এই সমস্যা খুবই সাধারণ — বিশেষ করে যখন একাধিক ডেভেলপার একসাথে কাজ করে।

BEM কী?

BEM হলো একটা নামকরণ পদ্ধতি (কোনো টুল বা লাইব্রেরি না, শুধু একটা কনভেনশন) যেখানে প্রতিটা ক্লাস নাম তিনটা অংশে ভাগ করা হয়:

অংশ	মানে	সিনট্যাক্স
Block	স্বাধীন, পুনর্ব্যবহারযোগ্য কম্পোনেন্ট	.card
Element	Block-এর ভেতরের অংশ, একা অর্থহীন	.card__title
Modifier	Block/Element-এর ভিন্ন রূপ বা অবস্থা	.card--featured

মনে রাখার সহজ উপায়: দুই আন্ডারস্কোর (__) Block-কে Element-এর সাথে যুক্ত করে, আর দুই হাইফেন (--) Modifier যোগ করে।

একটা বাস্তব উদাহরণ

আগের সমস্যাযুক্ত কোডটা BEM দিয়ে লিখলে:

<div class="card card--featured">
  <div class="card__title">শিরোনাম</div>
  <p class="card__description">বর্ণনা টেক্সট</p>
  <button class="card__button card__button--disabled">বাটন</button>
</div>

.card {
  background: white;
  border-radius: 8px;
  padding: 16px;
}

.card--featured {
  border: 2px solid #facc15;
}

.card__title {
  font-size: 18px;
  font-weight: bold;
}

.card__description {
  color: #6b7280;
  font-size: 14px;
}

.card__button {
  background: #2563eb;
  color: white;
  padding: 8px 16px;
}

.card__button--disabled {
  background: #9ca3af;
  cursor: not-allowed;
}

এখন শুধু ক্লাস নাম দেখেই বোঝা যাচ্ছে — এটা card Block-এর ভেতরের button Element, যেটা disabled অবস্থায় আছে। অন্য কোথাও .card__title লিখলেও এটা শুধু card-এর ভেতরেই প্রযোজ্য, তাই সংঘর্ষের ভয় নেই।

SCSS দিয়ে BEM লেখা

আগের পর্বে শেখা SCSS নেস্টিং BEM-এর সাথে দারুণ কাজ করে — & চিহ্ন দিয়ে খুব পরিষ্কারভাবে লেখা যায়।

.card {
  background: white;
  border-radius: 8px;
  padding: 16px;

  &--featured {
    border: 2px solid #facc15;
  }

  &__title {
    font-size: 18px;
    font-weight: bold;
  }

  &__button {
    background: #2563eb;
    color: white;
    padding: 8px 16px;

    &--disabled {
      background: #9ca3af;
      cursor: not-allowed;
    }
  }
}

এখানে &__title কম্পাইল হয়ে .card__title হয়ে যায় — এভাবে পুরো BEM স্ট্রাকচারটা একটা নেস্টেড ব্লকের মধ্যেই সুন্দরভাবে গুছিয়ে লেখা যায়।

লাইভ ডেমো — নন-BEM বনাম BEM

দুটো কার্ড দেখো — একই রকম দেখতে, কিন্তু একটার ক্লাস নাম সংঘর্ষ-প্রবণ, আরেকটা BEM দিয়ে সুরক্ষিত। হোভার করে দেখো।

❌ .title, .button (সংঘর্ষ-প্রবণ)

প্রোডাক্ট কার্ড

এই ক্লাসগুলো অন্য কোথাও একই নামে থাকলে ভেঙে যেতে পারে

✅ .card__title, .card__button (BEM)

প্রোডাক্ট কার্ড

card__ প্রিফিক্স থাকায় নিরাপদ, অন্য কোনো .title-এর সাথে সংঘর্ষ হবে না

সাধারণ ভুল যেগুলো এড়াবে

ভুল	সঠিক
.card__header__title	.card__title (Element এর ভেতর Element নেস্ট করা যায় না)
.button.disabled	.button--disabled (Modifier স্পষ্টভাবে নাম দিয়ে দেখাও)
.CardTitle	.card__title (ছোট হাতের আর হাইফেন/আন্ডারস্কোর ব্যবহার করো)

টিপস: Element কখনো আরেকটা Element-এর ভেতরে নেস্ট করে নাম দিও না (block__el1__el2 ভুল)। HTML-এ যতই গভীরে থাকুক, নামকরণে সবসময় সরাসরি Block-এর সাথে যুক্ত থাকবে।

একটা সম্পূর্ণ উদাহরণ — একটা নোটিফিকেশন কম্পোনেন্ট

চলো BEM দিয়ে একটা reusable নোটিফিকেশন বক্স বানাই, যার একাধিক Modifier থাকবে (success, error, warning)।

<div class="notification notification--success">
  <span class="notification__icon">✅</span>
  <p class="notification__message">সফলভাবে সেভ হয়েছে!</p>
  <button class="notification__close">×</button>
</div>

<div class="notification notification--error">
  <span class="notification__icon">❌</span>
  <p class="notification__message">কিছু একটা ভুল হয়েছে</p>
  <button class="notification__close">×</button>
</div>

.notification {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 10px;

  &--success {
    background: #dcfce7;
    color: #166534;
  }

  &--error {
    background: #fee2e2;
    color: #991b1b;
  }

  &--warning {
    background: #fef9c3;
    color: #854d0e;
  }

  &__message {
    flex: 1;
    margin: 0;
  }

  &__close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
  }
}

এই একটা .notification Block দিয়ে যতরকম নোটিফিকেশন লাগবে, শুধু Modifier ক্লাস পাল্টে বানানো যাবে — নতুন করে কিছু লেখার দরকার নেই।

নিজে চেষ্টা করো

Exercise:

1. একটা .profile-card Block বানাও, যার ভেতরে __avatar, __name, __bio Element থাকবে।
2. উপরের নোটিফিকেশন কম্পোনেন্টে একটা --warning Modifier যোগ করো নিজে।
3. তোমার Pathok Ghar প্রজেক্টের কোনো একটা কম্পোনেন্টের CSS ক্লাস নাম দেখো, সেটা BEM অনুযায়ী পুনর্লিখন করো।
4. SCSS নেস্টিং দিয়ে একটা .form Block বানাও, যেখানে __input-এর একটা --error Modifier থাকবে (লাল বর্ডার দেখানোর জন্য)।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব Advanced Animation — cubic-bezier কার্ভ আর keyframes বিস্তারিতভাবে, যাতে ওয়েবসাইটে প্রফেশনাল-মানের স্মুথ অ্যানিমেশন বানানো যায়।