BEM एलिमेंट को तब प्रमोट करें, जब उसका उद्देश्य स्पष्ट हो और वह पैरेंट ब्लॉक से बाहर अपनी इम्प्लीमेंटेशन का स्वामित्व रख सके। क्लास के नाम बदलने या CSS को स्थानांतरित करने से पहले, इस सीमा को जाँचने के लिए नीचे दिया गया Mac पर स्थानीय अभ्यास करें।

किसी एलिमेंट को स्वतंत्र क्या बनाता है?

लेखक द्वारा बनाए गए HTML पेज का रखरखाव करने वाले व्यक्ति के लिए व्यावहारिक सवाल यह है कि क्या बढ़ते हुए सेक्शन को अपने पैरेंट का हिस्सा बने रहना चाहिए या अलग से बनाए रखा जाने वाला ब्लॉक बनना चाहिए। BEM ब्लॉक को तार्किक और कार्यात्मक रूप से स्वतंत्र कंपोनेंट के रूप में परिभाषित करता है; एलिमेंट किसी ब्लॉक से जुड़ा होता है और उससे स्वतंत्र रूप से इस्तेमाल नहीं किया जा सकता। ब्लॉक में अन्य ब्लॉक हो सकते हैं। मुख्य अवधारणाएँ

एक कृत्रिम पेज पर विचार करें, जिसमें workbench ब्लॉक है। इसके workbench__preview में एक अमूर्त आकृति, एक लेबल और एक कैप्शन है। शुरुआत में, ये तीनों केवल वर्कबेंच के लिए हैं। बाद में, उसी प्रीव्यू की ज़रूरत एक संकरे shelf क्षेत्र में पड़ती है। यह दूसरी जगह आपको निष्कर्षण का ठोस काम देती है: तय करें कि क्या प्रीव्यू अपना रूप और आंतरिक संरचना रखने वाले shape-tile ब्लॉक में बदल सकता है।

केवल गहराई से यह तय नहीं होता। BEM DOM में नेस्ट किए गए एलिमेंट की अनुमति देता है, जबकि उनके नाम सपाट रखता है: workbench__preview, workbench__label और workbench__caption। workbench__preview__caption जैसा नाम गलत ढंग से यह दर्शाता है कि एक एलिमेंट किसी दूसरे एलिमेंट से संबंधित है। आधिकारिक क्विक स्टार्ट यह भी मानता है कि जब किसी जटिल एलिमेंट को स्वतंत्र रूप से व्यवस्थित किए गए आंतरिक हिस्सों की ज़रूरत हो, तो सर्विस ब्लॉक एक विकल्प हो सकता है। क्विक स्टार्ट

पठनीयता के लिए मार्कअप को अलग टेम्पलेट में ले जाने और नया BEM ब्लॉक स्थापित करने में फर्क करना उपयोगी है। आप दूसरा बदलाव तय किए बिना पहला बदलाव कर सकते हैं। ब्लॉक की सीमा तब स्पष्ट करें, जब आप बता सकें कि निकाला गया हिस्सा किसका स्वामित्व रखता है, उसका होस्ट क्या देता है और किसी दूसरी जगह पर उसका उपयोग कैसे होगा।

निकालने से पहले निर्भरता जाँचें

नीचे दिया गया निर्णय-सहायक, BEM के स्वतंत्रता सिद्धांत से निकली संपादकीय विधि है। यह कोई आधिकारिक स्कोरिंग प्रणाली नहीं है। इसे पूरे पेज पर एक साथ लागू करने के बजाय, किसी एक संभावित सबट्री पर लागू करें।

सवाल निष्कर्षण के पक्ष में प्रमाण एलिमेंट को बनाए रखने का कारण
क्या इसका उद्देश्य स्पष्ट है? “एक आकृति, लेबल और कैप्शन दिखाता है” इसका उद्देश्य केवल “वर्कबेंच का अंदरूनी रैपर” है
क्या यह अपनी आंतरिक प्रस्तुति का स्वामित्व रख सकता है? इसकी बॉर्डर, स्पेसिंग और टाइपोग्राफी साथ में इस्तेमाल होती हैं वे नियम पैरेंट की संरचना से अलग नहीं किए जा सकते
क्या होस्ट अलग से इसकी पोज़िशन तय कर सकता है? होस्ट उपलब्ध जगह और आसपास के अंतराल नियंत्रित करता है संभावित कंपोनेंट को किसी खास पूर्वज लेआउट की ज़रूरत है
क्या इसके वैरिएशन इसका अपना स्वरूप बताते हैं? कई जगहों पर कॉम्पैक्ट टाइल उपयोगी है हर वैरिएशन का नाम किसी खास पैरेंट के नाम पर है
क्या अलग रखरखाव से अभी फायदा होगा? इसका दूसरी जगह उपयोग है या इसकी आंतरिक ज़िम्मेदारी काफी बड़ी है निष्कर्षण से ऐसा इंटरफ़ेस जुड़ेगा जिसका अभी कोई उपयोग नहीं

कोड बदलने से पहले एक वाक्य लिखें: “shape-tile अपनी आकृति, लेबल, कैप्शन और आंतरिक स्पेसिंग का स्वामित्व रखता है; होस्ट पोज़िशन और उपलब्ध चौड़ाई का स्वामित्व रखता है।” अगर उस वाक्य में वर्कबेंच के कॉलम की व्यवस्था या सिबलिंग का क्रम शामिल करने की ज़रूरत बढ़ती जाए, तो फिर सोचें कि सीमा कहाँ होनी चाहिए।

बाहरी लेआउट को आंतरिक रूप से अलग रखें। BEM के CSS दिशानिर्देश बाहरी ज्यामिति और पोज़िशनिंग को पैरेंट के ज़रिए तय करते हैं, और एक ही नोड पर स्वतंत्र ब्लॉक क्लास को पैरेंट एलिमेंट क्लास के साथ जोड़ने का उदाहरण देते हैं। इस संयोजन को मिक्स कहा जाता है। CSS कार्यप्रणाली

उदाहरण के लिए, class="shape-tile workbench__preview" दोनों पहचानें व्यक्त कर सकता है। shape-tile को उसकी बॉर्डर और आंतरिक लेआउट तय करने दें, और workbench__preview को उसकी पोज़िशन तय करने दें। दोनों पहचानों के ज़रिए एक ही प्रॉपर्टी तय करने से बचें, जब तक कि ओवरराइड अनुबंध का जानबूझकर रखा गया हिस्सा न हो।

अपने Mac पर स्थानीय तुलना बनाएँ

इस अभ्यास के लिए एक नया फ़ोल्डर बनाएँ, ताकि मौजूदा पेज में बदलाव किए बिना निकाले गए डिज़ाइन की तुलना कर सकें। आपको सादे टेक्स्ट का एडिटर और डेस्कटॉप ब्राउज़र चाहिए; इस उदाहरण के लिए पैकेज इंस्टॉल करने, JavaScript, डाउनलोड किए गए फ़ॉन्ट या इमेज फ़ाइलों की ज़रूरत नहीं है।

TextEdit में File > New चुनें, फिर Format > Make Plain Text चुनें। नीचे दिया HTML पेस्ट करें और इसे index.html नाम से सेव करें। अगर पूछा जाए, तो Use .html चुनें। Apple ये चरण बताता है और यह भी समझाता है कि Ignore rich text commands का उपयोग करके HTML को सोर्स के रूप में दोबारा कैसे खोलें। Mac पर TextEdit में HTML दस्तावेज़ों के साथ काम करें

पूरा HTML दस्तावेज़ बनाएँ

यह दस्तावेज़ प्रस्तावित कंपोनेंट को दो होस्ट में रखता है। सभी लेबल काल्पनिक हैं और अमूर्त आकृति CSS से बनाई गई है। नीचे दी गई सामग्री को index.html नाम से सेव करें।

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape tile boundary exercise</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body class="demo">
  <h1>Shape tile boundary exercise</h1>
  <main class="demo__regions">
    <section class="workbench">
      <h2>Workbench A</h2>
      <div class="shape-tile workbench__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form A</h3>
          <p class="shape-tile__caption">Rounded sample, first arrangement.</p>
        </div>
      </div>
    </section>
    <section class="shelf">
      <h2>Shelf B</h2>
      <div class="shape-tile shelf__preview">
        <span class="shape-tile__shape" aria-hidden="true"></span>
        <div class="shape-tile__content">
          <h3 class="shape-tile__label">Form B</h3>
          <p class="shape-tile__caption">Rounded sample, second arrangement.</p>
        </div>
      </div>
    </section>
  </main>
</body>
</html>

पूरी स्टाइलशीट जोड़ें

उसी फ़ोल्डर में styles.css नाम की एक और सादी टेक्स्ट फ़ाइल बनाएँ। सुनिश्चित करें कि उसका वास्तविक फ़ाइल नाम styles.css हो, styles.css.txt नहीं। यह पूरी स्टाइलशीट पेस्ट करें:

/* Page and host styles */
.demo {
  margin: 0 auto;
  padding: 24px;
  max-width: 960px;
  font-family: system-ui, sans-serif;
  background: #f1f3f5;
  color: #243047;
}
.demo__regions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.workbench,
.shelf {
  box-sizing: border-box;
  padding: 16px;
  max-width: 100%;
  border: 1px dashed #6b778a;
}
.workbench { width: 480px; }
.shelf { width: 256px; }
.workbench__preview { margin-top: 24px; }
.shelf__preview { margin-top: 12px; }

/* Independent component styles */
.shape-tile {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid #718096;
  border-radius: 12px;
  background: #fff;
  color: #243047;
  font: 16px/1.5 system-ui, sans-serif;
}
.shape-tile__shape {
  flex: 0 0 48px;
  height: 48px;
  border-radius: 16px 24px 12px 24px;
  background: #536dbe;
}
.shape-tile__content {
  flex: 1 1 160px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shape-tile__label {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
}
.shape-tile__caption { margin: 6px 0 0; }

Safari या किसी अन्य डेस्कटॉप ब्राउज़र में index.html खोलें। अपेक्षित तुलना एक चौड़ी वर्कबेंच और एक संकरी शेल्फ के बीच है। दोनों टाइलों की कंपोनेंट स्टाइल एक जैसी है; उपलब्ध जगह तय करती है कि आकृति और टेक्स्ट साथ-साथ फिट होंगे या एक-दूसरे के नीचे लपेटे जाएँगे।

यहाँ रिसोर्स अनुबंध मायने रखता है: rel="stylesheet" बाहरी स्टाइलशीट रिसोर्स स्थापित करता है, और href="styles.css" उस फ़ाइल की पहचान करता है जिसकी इस दस्तावेज़ को ज़रूरत है। BEM क्लास जोड़ने से वह रिसोर्स लिंक स्थापित नहीं होता। अभ्यास को कहीं और ले जाते समय दोनों फ़ाइलें साथ रखें। HTML Standard इस स्टाइलशीट संबंध को परिभाषित करता है। HTML Standard: लिंक प्रकार “stylesheet”

कैसे पता चलेगा कि निष्कर्षण सफल हुआ?

इस तुलना को जाँच-अभ्यास की तरह इस्तेमाल करें। नीचे दिए गए अपेक्षित नतीजे प्रदान किए गए कोड पर आधारित हैं; ये आपके ब्राउज़र में की जाने वाली जाँचें हैं, ब्राउज़र टेस्ट के रिपोर्ट किए गए नतीजे नहीं।

  1. बेसलाइन जाँचें। दोनों टाइलों की पृष्ठभूमि सफेद होनी चाहिए, साथ में नीली गोलाकार आकृति, एक लेबल और एक कैप्शन होना चाहिए। अगर सब कुछ बिना स्टाइल का दिखे, तो कंपोनेंट की सीमा का आकलन करने से पहले स्टाइलशीट का फ़ाइल नाम और लिंक जाँचें।
  2. पोज़िशन क्लास हटाएँ। पहली टाइल से workbench__preview हटाएँ, सेव करें और पेज फिर लोड करें। उसका ऊपर का मार्जिन बदलना चाहिए, जबकि उसका आंतरिक रूप बरकरार रहना चाहिए।
  3. एक होस्ट क्लास हटाएँ। शामिल सेक्शन से workbench अस्थायी रूप से हटाएँ। उसका होस्ट फ़्रेम और तय चौड़ाई गायब होनी चाहिए; टाइल की कंपोनेंट स्टाइल बनी रहनी चाहिए।
  4. शेयर किए गए कंपोनेंट में बदलाव करें। .shape-tile में बॉर्डर रेडियस बदलें। होस्ट के किसी भी सिलेक्टर को संपादित किए बिना दोनों इंस्टेंस बदलने चाहिए।
  5. कंटेंट को कसौटी पर परखें। किसी एक कैप्शन को लंबे काल्पनिक वाक्य से बदलें और ब्राउज़र विंडो संकरी करें। टेक्स्ट का लपेटना जाँचें और देखें कि सारा टेक्स्ट दिखाई दे रहा है या नहीं।

ज़िम्मेदारी के आधार पर समस्याओं का अर्थ निकालें। होस्ट क्लास हटाने के बाद बॉर्डर गायब होने का अर्थ है कि कंपोनेंट की कोई स्टाइल अब भी होस्ट सिलेक्टर में हो सकती है। आसपास की अप्रत्याशित स्पेसिंग से पोज़िशन नियमों का पता चलता है। टेक्स्ट में अंतर से विरासत में मिली स्टाइल या ग्लोबल सिलेक्टर का पता चल सकता है। एक और ओवरराइड जोड़ने से पहले, ज़िम्मेदार निर्भरता ठीक करें।

BEM के नामकरण से ब्राउज़र-लागू स्टाइल आइसोलेशन नहीं बनता। CSS इनहेरिटेंस दस्तावेज़ ट्री के माध्यम से जारी रहता है: जब कैस्केड एलिमेंट के लिए कोई वैल्यू नहीं देता, तो विरासत में मिलने वाली प्रॉपर्टियाँ पैरेंट से वैल्यू लेती हैं। इसे CSS Cascading and Inheritance विनिर्देश में परिभाषित किया गया है और MDN में उदाहरणों के साथ समझाया गया है। CSS Cascading and Inheritance Module Level 5, अनुभाग 7.2, इनहेरिटेंस

उदाहरण में जानबूझकर टाइल के रूट पर फ़ॉन्ट और टेक्स्ट का रंग सेट किया गया है। वास्तविक पेज में साइट की टाइपोग्राफी इनहेरिट करना बेहतर हो सकता है। इसे निर्भरता के रूप में दर्ज करें। स्वतंत्रता का अर्थ है कि ज़रूरी परिवेश को समझा और कहीं और ले जाया जा सकता है; इसका अर्थ यह नहीं कि हर कंपोनेंट के भीतर ब्राउज़र की हर डिफ़ॉल्ट सेटिंग दोहरानी पड़े।

एलिमेंट को कब बनाए रखना चाहिए?

उम्मीदवार को एलिमेंट के रूप में बनाए रखें, जब उसका अर्थ और इम्प्लीमेंटेशन पैरेंट तक ही सीमित रहे। केवल वर्कबेंच के लिए बना अलाइनमेंट रैपर कई चाइल्ड एलिमेंट रख सकता है, फिर भी उसे अलग सार्वजनिक पहचान देने की ज़रूरत नहीं होती। नया ब्लॉक जोड़ने से पहले उसके BEM नामों को सपाट करें और व्यवस्था बेहतर बनाएँ।

इसके उलट, केवल एक बार इस्तेमाल होने वाला कंपोनेंट भी अलग करने लायक हो सकता है, जब उसकी आंतरिक ज़िम्मेदारी काफी बड़ी हो और उसकी निर्भरता की सीमा स्पष्ट हो। पुनः उपयोग को सहायक प्रमाण मानें, कोई अनिवार्य संख्या नहीं। इस अभ्यास में दूसरी जगह पर उपयोग से सीमा का निरीक्षण आसान होता है; इससे दो उपयोग की कोई सार्वभौमिक शर्त स्थापित नहीं होती।

उस निष्कर्षण पर भी दोबारा विचार करें जिसमें होस्ट-विशिष्ट वैरिएशन बढ़ते जाएँ। shape-tile--inside-workbench जैसे नाम संकेत देते हैं कि पोज़िशनिंग कंपोनेंट के इंटरफ़ेस का हिस्सा बन रही है। पहले पूछें कि क्या यह अंतर workbench__preview में होना चाहिए। कंपोनेंट वैरिएशन उसी अंतर के लिए रखें जिसे आप कंपोनेंट के अपने शब्दों में समझा सकें।

क्या आधुनिक CSS स्कोपिंग से निर्णय बदलता है?

@scope नियम यह सीमित कर सकता है कि उसके भीतर के सिलेक्टर कहाँ मैच करें, जिससे दस्तावेज़ की सबट्री में सिलेक्टर संभालना आसान हो सकता है। MDN फिलहाल इसे Baseline 2026 के रूप में चिह्नित करता है; मार्च 2026 से यह मौजूदा ब्राउज़र संस्करणों में उपलब्ध है, हालांकि पुराने डिवाइस या ब्राउज़र में इसका समर्थन न भी हो। यह न मानें कि हर Mac इंस्टॉलेशन इसका समर्थन करता है। @scope CSS एट-रूल

दिए गए अभ्यास में सामान्य क्लास सिलेक्टर इस्तेमाल होते हैं और @scope की ज़रूरत नहीं है। स्कोपिंग के बिना ब्राउज़र का समर्थन करते समय, कंपोनेंट की ज़रूरी स्टाइल उन्हीं नियमों में रखें। स्कोपिंग सीमा व्यक्त करने का तरीका बेहतर बना सकती है, लेकिन स्वामित्व का निर्णय लेने के लिए अब भी कंपोनेंट के उद्देश्य, निर्भरताओं और पोज़िशन का स्पष्ट विवरण चाहिए।

जटिल एलिमेंट को तब निकालें, जब उसका उद्देश्य और आंतरिक इम्प्लीमेंटेशन साथ ले जा सकें, आसपास का लेआउट होस्ट के पास छोड़ सकें और नतीजे को किसी दूसरी जगह पर दिखा सकें। अगर ये ज़िम्मेदारियाँ उलझी रहें, तो उन्हें स्पष्ट करते समय एलिमेंट बनाए रखें; केवल छोटा क्लास नाम रिफैक्टर पूरा नहीं करेगा।

स्रोत