CSS এবং BEM

এই প্রবন্ধটি CSS এবং BEM ব্যাখ্যা করে।

YouTube Video

প্রিভিউর জন্য HTML

css-bem.html
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>BEM Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-bem.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS &amp; BEM(Block Element Modifier)</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>BEM Example</h2>
20        </header>
21        <article>
22            <h3>BEM HTML Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25<pre class="sample">
26&lt;div class=&quot;button button--primary&quot;&gt;
27    &lt;span class=&quot;button__text&quot;&gt;Click Me&lt;/span&gt;
28&lt;/div&gt;
29</pre>
30            </section>
31        </article>
32        <article>
33            <h3>BEM Example</h3>
34            <section>
35                <header><h4>HTML</h4></header>
36<pre class="sample">
37&lt;header class=&quot;header&quot;&gt;
38    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
39    &lt;nav class=&quot;header__nav&quot;&gt;
40        &lt;ul class=&quot;header__menu&quot;&gt;
41            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
42            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
43            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
44        &lt;/ul&gt;
45    &lt;/nav&gt;
46&lt;/header&gt;
47</pre>
48            </section>
49            <header><h4>HTML+CSS</h4></header>
50            <section class="sample-view">
51                <header class="header">
52                    <div class="header__logo">My Logo</div>
53                    <nav class="header__nav">
54                        <ul class="header__menu">
55                            <li class="header__menu-item header__menu-item--active">Home</li>
56                            <li class="header__menu-item">About</li>
57                            <li class="header__menu-item">Contact</li>
58                        </ul>
59                    </nav>
60                </header>
61            </section>
62        </article>
63        <article>
64            <h3>BEM Example</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67<pre class="sample">
68&lt;header class=&quot;header&quot;&gt;
69    &lt;div class=&quot;header__logo&quot;&gt;My Logo&lt;/div&gt;
70    &lt;nav class=&quot;header__nav&quot;&gt;
71        &lt;ul class=&quot;header__menu&quot;&gt;
72            &lt;li class=&quot;header__menu-item header__menu-item--active&quot;&gt;Home&lt;/li&gt;
73            &lt;li class=&quot;header__menu-item&quot;&gt;About&lt;/li&gt;
74            &lt;li class=&quot;header__menu-item&quot;&gt;Contact&lt;/li&gt;
75            &lt;li class=&quot;header__menu-item header__menu-item--disabled&quot;&gt;Disabled&lt;/li&gt;
76        &lt;/ul&gt;
77    &lt;/nav&gt;
78&lt;/header&gt;
79</pre>
80            </section>
81            <header><h4>HTML+CSS</h4></header>
82            <section class="sample-view">
83                <header class="header">
84                    <div class="header__logo">My Logo</div>
85                    <nav class="header__nav">
86                        <ul class="header__menu">
87                            <li class="header__menu-item header__menu-item--active">Home</li>
88                            <li class="header__menu-item">About</li>
89                            <li class="header__menu-item">Contact</li>
90                            <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91                        </ul>
92                    </nav>
93                </header>
94            </section>
95        </article>
96    </main>
97</body>
98</html>

CSS এবং BEM: কার্যকর স্টাইল ব্যবস্থাপনার জন্য একটি পদ্ধতি

CSS একটি মৌলিক ভাষা যা একটি ওয়েবসাইটের চেহারা নির্ধারণে ব্যবহৃত হয়। তবে, CSS কার্যকরভাবে পরিচালনা করা চ্যালেঞ্জ হতে পারে, বিশেষত বড় প্রকল্পগুলির জন্য। BEM (Block Element Modifier) একটি CSS নামকরণ নিয়ম যা এই সমস্যাগুলি সমাধানের জন্য এবং পুনঃব্যবহারযোগ্যতা এবং রক্ষণাবেক্ষণক্ষমতা বাড়ানোর জন্য ডিজাইন করা হয়েছে।

CSS-এ চ্যালেঞ্জ এবং BEM-এর প্রয়োজনীয়তা

CSS-এর চ্যালেঞ্জগুলির মধ্যে নিম্নলিখিত সমস্যা অন্তর্ভুক্ত থাকে:।

  1. গ্লোবাল নেমস্পেস সংঘর্ষ: CSS-এ, ক্লাস নামগুলো গ্লোবাল হয়, যা বিভিন্ন উপাদানের মধ্যে সংঘর্ষের ঝুঁকি তৈরি করে।
  2. জটিল সিলেক্টরগুলোর অতিরিক্ত ব্যবহার: অতিরিক্ত জটিল ডেসেন্ডেন্ট বা ID সিলেক্টরগুলো নির্দিষ্টতা বাড়িয়ে দেয়, যা ভবিষ্যতের পরিবর্তনগুলি কঠিন করে তোলে।
  3. পুনঃব্যবহারযোগ্যতার ঘাটতি: নির্দিষ্ট স্টাইলগুলো অন্যান্য উপাদানে পুনঃব্যবহার করা কঠিন হয়ে পড়ে।

এই সমস্যাগুলো সমাধানের জন্য BEM ডিজাইন করা হয়েছে।

BEM-এর মৌলিক ধারণাগুলো

BEM তিনটি প্রধান উপাদান নিয়ে গঠিত:।

  1. ব্লক: একটি স্বতন্ত্র উপাদান যা তার নিজস্ব অর্থ বহন করে।
  2. এলিমেন্ট: একটি ব্লকের অংশ যা এর সাথে যৌক্তিকভাবে সংযুক্ত।
  3. মডিফায়ার: একটি ব্লক বা এলিমেন্টের চেহারা বা আচরণ পরিবর্তন করে।

BEM নেমিং কনভেনশন নিচের ফরম্যাট অনুসরণ করে:।

.block__element--modifier
  • block: ব্লকের উপাদানের নাম।
  • element: একটি এলিমেন্ট যা ব্লকের অংশ।
  • modifier: একটি নির্দিষ্ট অবস্থা বা স্টাইল বৈচিত্র্যটি উপস্থাপন করে।

প্রায়োগিক উদাহরণ

নিচে একটি সহজ উদাহরণ দেওয়া হয়েছে।

1<div class="button button--primary">
2  <span class="button__text">Click Me</span>
3</div>
  • button একটি ব্লক।
  • button__text একটি উপাদান।
  • button--primary একটি মডিফায়ার।

BEM-এর সুবিধাগুলি

BEM-এর সুবিধাসমূহ নিচে উল্লেখ করা হলো।

  • সুসংগতি নামকরণের নিয়ম সুসংগত হওয়ায়, কোড পড়া সহজ হয়।
  • পুনঃব্যবহারযোগ্যতা কম্পোনেন্টগুলো পুনরায় ব্যবহার করা সহজ হয়।
  • রক্ষণাবেক্ষণযোগ্যতা অন্যান্য ডেভেলপাররা কোড সহজে বুঝতে পারে, ফলে সংশোধন করাও সহজ হয়।

BEM ব্যবহার করে একটি প্রকল্প তৈরি করা

HTML ডিজাইন

এখানে BEM প্রয়োগ করা একটি HTML-এর উদাহরণ দেওয়া হলো।

 1<header class="header">
 2  <div class="header__logo">My Logo</div>
 3  <nav class="header__nav">
 4    <ul class="header__menu">
 5      <li class="header__menu-item header__menu-item--active">Home</li>
 6      <li class="header__menu-item">About</li>
 7      <li class="header__menu-item">Contact</li>
 8    </ul>
 9  </nav>
10</header>

CSS ডিজাইন

HTML এর জন্য নিম্নরূপ CSS লিখুন।

 1.header {
 2  background-color: #333;
 3  color: #fff;
 4  padding: 10px;
 5}
 6
 7.header__logo {
 8  font-size: 24px;
 9}
10
11.header__nav {
12  display: flex;
13  justify-content: space-around;
14}
15
16.header__menu {
17  list-style: none;
18  margin: 0;
19  padding: 0;
20  display: flex;
21}
22
23.header__menu-item {
24  margin: 0 10px;
25  padding: 5px 10px;
26}
27
28.header__menu-item--active {
29  font-weight: bold;
30  border-bottom: 2px solid #fff;
31}
  • এই CSS-এ BEM (Block Element Modifier) কনভেনশন ব্যবহার করে মডুলার স্টাইল নির্ধারণ করা হয়েছে, যাতে পুনঃব্যবহারযোগ্যতা ও রক্ষণাবেক্ষণযোগ্যতা বাড়ানো যায়।

স্টাইল সম্প্রসারণ

কীভাবে নির্দিষ্ট একটি মেনু আইটেম নিষ্ক্রিয় করার জন্য নতুন একটি মডিফায়ার যোগ করা যায়, আসুন দেখি।

এর জন্য সংশ্লিষ্ট HTML এই রকম দেখতে হবে।

1<li class="header__menu-item header__menu-item--disabled">Disabled</li>
1.header__menu-item--disabled {
2  opacity: 0.5;
3  pointer-events: none;
4}
  • এই CSS-এ এমন একটি মডিফায়ার নির্ধারিত হয়েছে, যা নিষ্ক্রিয় মেনু আইটেমগুলোকে দৃষ্টিগতভাবে ফ্যাকাসে করে এবং ক্লিক ইন্টারঅ্যাকশন নিষ্ক্রিয় করে দেয়।

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

BEM ব্যবহার করার সময়, নিম্নলিখিত বিষয়গুলো মনে রাখা যেতে পারে।

প্রশ্ন ১: আমার কি BEM-এর নামকরণ নীতিমালা কঠোরভাবে অনুসরণ করতে হবে?

BEM-এর নামকরণের নিয়ম কঠোরভাবে অনুসরণ করা আবশ্যক নয়, তবে সুসংগতি বজায় রাখা গুরুত্বপূর্ণ। প্রকল্পের মধ্যে একীভূত নিয়ম স্থাপন করুন এবং পুরো দল তা অনুসরণ করে তা নিশ্চিত করুন।

প্রশ্ন ২: BEM প্রবর্তন করলে কি CSS আরও বিস্তারিত হয় না?

BEM প্রবর্তনের ফলে CSS ক্লাসের নাম দীর্ঘ হতে পারে, তবে এটি উপাদানগুলোর ভূমিকা আরও স্পষ্ট করে। ফলে, রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি পায় এবং উপকারিতা বাড়তি অংশের তুলনায় বেশি হয়।

প্রশ্ন ৩: BEM কি অন্যান্য CSS ফ্রেমওয়ার্কগুলির পাশাপাশি ব্যবহার করা যেতে পারে?

BEM অন্যান্য CSS ফ্রেমওয়ার্কের সাথেও ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, টেইলউইন্ড CSS বা বুটস্ট্র্যাপ ব্যবহার করার সময়ও, আপনি কাস্টম কম্পোনেন্টের উপর BEM প্রয়োগ করতে পারেন।

উপসংহার

BEM CSS-কে মডুলার এবং সহজে ব্যবস্থাপনার জন্য স্পষ্ট নামকরণের নিয়ম প্রদান করে। এই পদ্ধতি ব্যবহার করলে স্টাইল কনফ্লিক্ট এড়ানো যায় এবং রক্ষণাবেক্ষণ ও পুনঃব্যবহারযোগ্যতা উল্লেখযোগ্যভাবে বাড়ানো যায়। উপযুক্ত নামকরণ নীতিমালা ডিজাইন করলে প্রকল্পের গুণগত মান এবং উৎপাদনশীলতা বৃদ্ধি পায়।

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

YouTube Video