SASS এবং BEM

এই প্রবন্ধে SASS এবং BEM ব্যাখ্যা করা হয়েছে।

আমরা SASS এবং BEM ব্যবহার করে এবং নির্দিষ্ট উদাহরণের মাধ্যমে ব্যাখ্যা করব, কীভাবে CSS বড় হওয়ার সাথে সাথে যেসব বিভ্রান্তি ও ভঙ্গুরতা দেখা দেয়, সেগুলো প্রতিরোধের ধারণা ও বাস্তবায়ন পদ্ধতি।

YouTube Video

SASS এবং BEM

ফাইল এবং স্ক্রীনের সংখ্যা বাড়ার সাথে সাথে CSS-এ এমন সমস্যা দেখা দিতে পারে যেমন— 'আমি জানি না এই স্টাইল কোথায় সংজ্ঞায়িত হয়েছে' এবং 'একটু পরিবর্তনেই অন্য স্ক্রিনে দেখায় ভেঙে গেছে'।

এটি কারণ CSS মূলত এমন একটি ভাষা যা ডিজাইন রুল জোর করে না। যদি আপনি একইভাবে লিখে যেতে থাকেন, তবে অনাকাঙ্ক্ষিত নির্ভরশীলতা বাড়বে।

SASS এবং BEM হল ব্যবহারিক কৌশল, যা CSS-কে স্বতঃস্ফূর্ত লিখন থেকে পরিকল্পিত ও নিয়ন্ত্রিত কোডে রূপান্তর করে এবং এভাবে এই ধরনের সমস্যা প্রতিরোধ করতে সাহায্য করে। দুটিকে একত্রিত করার মাধ্যমে আপনি স্টাইলের অর্থ পরিষ্কার করতে পারবেন এবং একই সাথে পাঠযোগ্যতা, পুনঃব্যবহারযোগ্যতা, এবং রক্ষণাবেক্ষণযোগ্যতা উন্নত করতে পারবেন।

কেন CSS সহজেই অপ্রবদ্ধযোগ্য হয়ে পড়ে তার কারণসমূহ

নিম্নরূপ CSS পরে কোড দেখার সময় কীভাবে এটি কাজ করে বোঝা কঠিন হয়ে পড়ে।

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• এই উদাহরণে, একই .title ক্লাসের চেহারা বিভিন্ন স্থানে ভিন্ন হয়, তাই সঙ্গে সঙ্গে বুঝতে পারবেন না কোন স্টাইল এই .title-এ প্রয়োগ হবে।
• এভাবে, সিলেক্টরগুলো যত গভীর ও প্যারেন্ট এলিমেন্টের উপর নির্ভরশীল হয়, CSS-এ প্রতিটি পরিবর্তনের প্রভাবে কি ঘটবে তা অনুমান করা কঠিন হয় ও সহজেই ভেঙে যেতে পারে।

BEM হল একটি নামকরণ কনভেনশন যা 'নামের মাধ্যমে ভূমিকাকে প্রকাশ করে'।

BEM মানে হল ব্লক / এলিমেন্ট / মডিফায়ার, এবং এতে ক্লাসটির কোন কম্পোনেন্ট নির্দেশ করছে এবং কোন অবস্থায় আছে সেটা নামেই প্রকাশ পায়।

• Block হচ্ছে একটি স্বতন্ত্র কম্পোনেন্ট।
• Element হচ্ছে ব্লকের অভ্যন্তরীণ উপাদান।
• Modifier বোঝায় কোনো অবস্থা বা বৈচিত্র।

1.card {}
2.card__title {}
3.card--highlighted {}

এই নামকরণ রীতির কারণে আপনি শুধু HTML দেখেই এর স্ট্রাকচার ও ভূমিকা অনুমান করতে পারবেন।

BEM ব্যবহার করে HTML-এর মৌলিক রূপ

এখানে BEM ব্যবহার করে HTML-এ প্রকাশিত একটি কার্ড UI-এর উদাহরণ দেয়া হল।

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

শুধুমাত্র ক্লাস নামগুলি দেখেই বোঝা যায় এটি একটি 'কার্ড কম্পোনেন্ট', 'এর ভিতরে টাইটেল', এবং 'জোর দেওয়া অবস্থা'। এটাই BEM-এর সবচেয়ে বড় সুবিধা।

তবে, শুধুমাত্র BEM ব্যবহার করলে CSS অনেক বড় ও জটিল হয়ে যেতে পারে।

আপনি যদি CSS-এ BEM 그대로 লেখেন, তবে কোডের পরিমাণ বেড়ে যায়।

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

এখানে SASS ব্যবহার করলে স্ট্রাকচার বজায় রেখে সাজানো কোড লেখা সম্ভব।

SASS nesting দিয়ে স্বাভাবিকভাবে BEM প্রকাশ করা

SASS nesting ব্যবহার করে আপনি সরাসরি কোডে BEM-এর স্ট্রাকচার ফুটিয়ে তুলতে পারেন।

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& প্যারেন্ট সিলেক্টরকে বোঝায় এবং এটি BEM-এর নামকরণের সাথে খুব ভালোভাবে কাজ করে।

এই SASS থেকে উৎপন্ন CSS

উপরের SASS নিম্নরূপ CSS-এ রূপান্তরিত হয়।

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

দেখতে এক হলেও, ডেভেলপারের মানসিক চাপ অনেক কমে যায়।

মডিফায়ার নিরাপদ ব্যবহারের জন্য ডিজাইন করা

BEM-এ মডিফায়ার 'স্টেট' বোঝানোয়, শুধুমাত্র ওভাররাইডের জন্যই সেগুলি ব্যবহারে সীমাবদ্ধ রাখা উচিত।

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

মডিফায়ারগুলোকে 'যোগান' না ভেবে 'পরিবর্তন' হিসেবে ধরলে ডিজাইন আরও স্থিতিশীল হয়।

এলিমেন্ট নেস্টিং এক স্তরে সীমাবদ্ধ রাখুন

BEM-এ খুব গভীরভাবে এলিমেন্ট নেস্ট করা উচিত নয়।

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

.card__header__title-এর মত মাল্টি-লেভেল এলিমেন্ট ব্লক ভাগ করার সংকেত।

SASS ফাইল স্ট্রাকচারের একটি উদাহরণ

সবশেষে, এখানে বাস্তব প্রকল্পের জন্য একটি ব্যবহারিক SASS স্ট্রাকচারের উদাহরণ দেয়া হয়েছে।

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

প্রতি কম্পোনেন্টকে ১ ব্লক = ১ ফাইল হিসেবে ম্যানেজ করলে, ভেঙে পড়ার সম্ভাবনা কমে যায়।

card.scss-এর উদাহরণ

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

কারণ এই ইউনিটে সবকিছু স্বয়ংসম্পূর্ণ, মুছে ফেলা, স্থানান্তর, ও পুনঃব্যবহার সহজ হয়ে যায়।

সারসংক্ষেপ

SASS এবং BEM কেবল ফ্যাশনেবল কৌশল নয়—এগুলি হল CSS-কে ডিজাইনযোগ্য কোডে রূপান্তর করার ব্যবহারিক পদ্ধতি।

• BEM অর্থ ও ভূমিকা প্রকাশ করে নামকরণ করে।
• SASS স্ট্রাকচার বজায় রেখেই সহজ লেখার সুযোগ দেয়।
• উভয়কে একত্র করলে CSS সহজে ভেঙে পড়ে না।

চলুন আজ CSS লেখি যেভাবে ভবিষ্যতের নিজেই বুঝতে পারবেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video