CSS Architecture: BEM

जैसे-जैसे कोई stylesheet मुट्ठी भर pages से आगे बढ़ती है, '.card' या '.title' जैसे plain class names टकराने और confusing होने लगते हैं, किसका card, किसका title? BEM (Block, Element, Modifier) एक naming convention है जो ठीक इसी समस्या को solve करती है, बिना किसी नई CSS features की ज़रूरत के, सिर्फ classes को नाम देने का एक consistent तरीका। BEM में, एक Block एक standalone component है (जैसे कोई card), एक Element उस block के अंदर का एक हिस्सा है (जैसे card का title), और एक Modifier इनमें से किसी का एक variation है (जैसे एक featured card)। naming pattern, block__element--modifier, हर class name को सिर्फ पढ़कर self-documenting बना देता है। cookiescursor.com जैसे किसी बढ़ते project पर BEM अपनाना class names को predictable और searchable रखता है, यहाँ तक कि components और contributors की संख्या बढ़ने पर भी।

In this page:

BEM क्या है?
Blocks
Elements
Modifiers
Practice में BEM

Syntax

css

.block { }
.block__element { }
.block--modifier { }

BEM क्या है?

BEM (Block, Element, Modifier) CSS classes के लिए एक naming convention है जो relationship समझने के लिए HTML या CSS check करने की ज़रूरत के बिना सिर्फ इसके class names पढ़कर किसी component की structure और variations को साफ़ बना देती है।

Note: BEM को किसी tooling या build step की ज़रूरत नहीं, यह बस एक disciplined naming habit है जिसे आप किसी भी project पर अपना सकते हैं, cookiescursor.com सहित।

Warning: BEM एक naming convention है, कोई CSS feature नहीं, browser इसे enforce नहीं करता, इसलिए किसी team में consistency shared discipline पर निर्भर करती है।

उदाहरण: What Is BEM?

css

<style>
.cc-card {
  border: 1px solid #ccc;
}
</style>
<div class="cc-card">Obvious structure just from the class name</div>

Blocks

एक Block एक standalone, reusable component है, जैसे कोई card, navbar, या button, एक single साफ़ class से नाम दिया गया जो पूरे component को represent करती है।

Note: Blocks को इस आधार पर नाम दें कि वे क्या हैं, न कि कहाँ इस्तेमाल होते हैं, '.cc-card' को फिर cookiescursor.com पर कहीं भी reuse किया जा सकता है, सिर्फ एक page पर नहीं।

Warning: किसी block का class name कभी भी उसके parent container पर निर्भर नहीं होना चाहिए, वह coupling ठीक वही चीज़ है जिसे avoid करने के लिए BEM design किया गया है।

उदाहरण: Blocks

css

<style>
.cc-card {
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 16px;
}
</style>
<div class="cc-card">A standalone, reusable component</div>

Elements

एक Element एक ऐसा हिस्सा है जो सिर्फ अपने block के अंदर मतलब रखता है, block name और element name को जोड़ने वाले एक double underscore से नाम दिया गया, जैसे block__element।

Note: अगर markup का कोई हिस्सा सिर्फ एक specific block के अंदर ही दिखता है, तो यह एक standalone class के बजाय एक element class का एक strong candidate है।

Warning: BEM जानबूझकर elements को chain करने से बचता है, जैसे block__element__subelement, गहराई से nested markup के लिए भी element names को flat रखें।

उदाहरण: Elements

css

<style>
.cc-card {
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 16px;
}
.cc-card__title {
  font-weight: bold;
}
</style>
<div class="cc-card">
  <h3 class="cc-card__title">Only makes sense inside cc-card</h3>
</div>

Modifiers

एक Modifier किसी block या element का एक variation represent करता है, एक double hyphen से नाम दिया गया, जैसे block--modifier या block__element--modifier, और हमेशा base class के साथ इस्तेमाल होता है, कभी अकेले नहीं।

Note: Modifiers states और variants के लिए perfect हैं, जैसे एक featured card, एक large button, या एक disabled input।

Warning: एक modifier class को सिर्फ base से अंतर को style करना चाहिए, base block की पूरी styling को duplicate नहीं करना चाहिए।

उदाहरण: Modifiers

css

<style>
.cc-card {
  background: #f7f7f7;
  border: 3px solid #ccc;
  padding: 16px;
}
.cc-card--featured {
  border-color: gold;
}
</style>
<div class="cc-card cc-card--featured">Base class plus a modifier</div>

Practice में BEM

असली projects में, BEM के flat, explicit class names गहरी CSS selector nesting की ज़रूरत को replace कर देते हैं, जो हर rule की specificity को कम, consistent, और ज़रूरत पड़ने पर override करना आसान रखता है।

Note: अगर आप खुद को .card .header .title जैसा एक लंबा nested selector लिखते हुए पाएँ, तो यह आमतौर पर एक संकेत है कि markup को इसके बजाय एक BEM element class से फ़ायदा होगा।

Warning: एक ही project में BEM class names को गहराई से nested selectors के साथ mix करना उस low, consistent specificity को कमज़ोर करता है जो BEM देने के लिए बना है।

उदाहरण: BEM in Practice

css

<style>
.cc-card {
  background: #f7f7f7;
  border: 1px solid #ddd;
  padding: 16px;
}
.cc-card__title {
  font-size: 18px;
}
</style>
<div class="cc-card">
  <div class="cc-card__title">Flat class instead of .card .header .title</div>
</div>

Live Example

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Scroll Snap Next Lesson → CSS Custom Properties