প্রকল্পগুলি বৃদ্ধির সাথে সাথে, সাধারণ CSS গ্লোবাল স্কোপ থেকে ভোগ করে — প্রতিটি নির্বাচক বিশ্বব্যাপী প্রতিযোগিতা করে, specificity যুদ্ধ দেখা দেয়, এবং কেউ একটি নিয়ম মুছতে সাহস করে না। পদ্ধতিগুলি CSS বজায় রাখার যোগ্য রাখতে কাঠামো এবং নামকরণ সম্মেলন আরোপ করে।
একটি নামকরণ সম্মেলন যা সম্পর্কগুলিকে স্পষ্ট করে এবং specificity সমতল রাখে (সমস্ত একক ক্লাস):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
BEM এর মূল্য: ক্লাস নামগুলি স্ব-ডকুমেন্টেড, সম্মেলন দ্বারা স্কোপড, এবং একভাবে নিম্ন-specificity (কোন nesting/id যুদ্ধ নেই)।
মার্কআপে সরাসরি ছোট একক-উদ্দেশ্য ক্লাস থেকে শৈলী সংমিশ্রণ করুন:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
পেশাদার: কোন নামকরণ নেই, কোন অব্যবহৃত CSS নেই (পরিষ্কৃত), সামঞ্জস্যপূর্ণ ডিজাইন টোকেন। বিপক্ষ: verbose HTML। এর গতি এবং সামঞ্জস্যের জন্য অত্যন্ত জনপ্রিয়।
উপাদান ফ্রেমওয়ার্কে আধুনিক পদ্ধতি — একটি উপাদানে শৈলী স্কোপ করুন যাতে তারা ফাঁস না হয়:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
এটি সম্মেলনের পরিবর্তে যান্ত্রিকভাবে গ্লোবাল-স্কোপ সমস্যা সমাধান করে।
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
সবাই একই শত্রুদের বিরুদ্ধে লড়াই করে: specificity creep, নামকরণ সংঘর্ষ, মৃত কোড, এবং অপ্রত্যাশিত cascades। নামকরণ (BEM) এর মাধ্যমে, utilities (Tailwind), বা স্কোপিং (Modules) এর মাধ্যমে, তারা CSS অনুমানযোগ্য এবং স্কেলে পরিবর্তনের জন্য নিরাপদ রাখে।
বড় CSS কোডবেসগুলি বৈশ্বিক স্কোপ এবং specificity যুদ্ধের অধীনে শৃঙ্খলা ছাড়াই পতিত হয়।
একটি পদ্ধতি বেছে নেওয়া এবং ধারাবাহিকভাবে প্রয়োগ করা (আজকাল সাধারণত BEM, Tailwind, বা স্কোপড CSS Modules) শৈলীগুলিকে একটি দল এবং codebase বৃদ্ধির সাথে মডুলার, মোছার যোগ্য, এবং সংঘর্ষ-মুক্ত রাখে।