स्वच्छ और व्यवस्थित सीएसएस लिखना महत्वपूर्ण है, खासकर बड़ी परियोजनाओं के लिए। अपने सीएसएस को संरचित करने के सर्वोत्तम तरीकों में से एक बीईएम नामकरण परंपरा का उपयोग करना है। इस लेख में, हम समझाएंगे कि बीईएम क्या है, यह क्यों महत्वपूर्ण है, इसके फायदे और नुकसान हैं, और आपको दो उदाहरणों के साथ इसका उपयोग कैसे करें।

बीईएम क्या है?

BEM का अर्थ है ब्लॉक, तत्व, और संशोधक। यह सीएसएस वर्ग के नाम लिखने के लिए एक नामकरण प्रणाली है जो आपके कोड को समझने और बनाए रखने में आसान बनाती है। बीईएम का मुख्य लक्ष्य डेवलपर्स को पुन: प्रयोज्य, मॉड्यूलर और स्केलेबल सीएसएस लिखने में मदद करना है।

1. ब्लॉक: एक स्टैंडअलोन घटक जो अपने आप में समझ में आता है (उदाहरण के लिए, एक बटन या एक फॉर्म)।
2. तत्व: ब्लॉक का एक भाग जिसका स्वयं में कोई अर्थ नहीं है और यह ब्लॉक पर निर्भर है (उदाहरण के लिए, एक बटन आइकन)।
3. संशोधक: किसी ब्लॉक या तत्व का एक अलग संस्करण (उदाहरण के लिए, एक अलग रंग वाला बटन)।

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

बीईएम का उपयोग क्यों करें?

बीईएम का उपयोग करने से आपको गन्दा और भ्रमित करने वाले सीएसएस से बचने में मदद मिलती है। यह कई लाभ लाता है:

• संगति: सभी वर्ग के नाम एक ही पैटर्न का पालन करते हैं, जिससे आपका कोड अधिक पूर्वानुमानित और समझने में आसान हो जाता है।
• पुन: प्रयोज्यता: किसी प्रोजेक्ट के विभिन्न हिस्सों में ब्लॉक और तत्वों का पुन: उपयोग किया जा सकता है।
• आसान रखरखाव: अन्य डेवलपर आपके कोड को आसानी से पढ़ और संशोधित कर सकते हैं।
• संघर्ष से बचा जाता है: बीईएम आपको विभिन्न घटकों के बीच सीएसएस टकराव को रोकने में मदद करता है।

बीईएम का उपयोग कैसे करें: उदाहरण

उदाहरण 1: एक साधारण बटन

आइए एक बुनियादी बटन ब्लॉक से शुरुआत करें और देखें कि बीईएम कैसे काम करता है।

HTML:

  Submit

सीएसएस:

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

स्पष्टीकरण:

• बटन एक ब्लॉक है, जो मुख्य बटन शैली का प्रतिनिधित्व करता है।
• बटन--प्राइमरी एक संशोधक है, जो इस विशिष्ट बटन संस्करण पर नीली पृष्ठभूमि लागू करता है।

उदाहरण 2: एक कार्ड घटक

अब एक शीर्षक और विवरण (तत्व), और एक छोटे आकार के संस्करण (संशोधक) के साथ एक कार्ड ब्लॉक बनाएं।

HTML:

  
Title
  
This is a description.

सीएसएस:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

स्पष्टीकरण:

• कार्ड, कार्ड घटक का प्रतिनिधित्व करने वाला एक ब्लॉक है।
• कार्ड__शीर्षक और कार्ड__विवरण तत्व हैं, कार्ड के विशिष्ट भाग।
• कार्ड--छोटा एक संशोधक है, जो कार्ड के छोटे संस्करण के लिए पैडिंग को कम करता है।

बीईएम के फायदे और नुकसान

पेशेवर:

1. संगठित और सुसंगत: आपके सीएसएस को साफ और अच्छी तरह से संरचित रखने में मदद करता है।
2. सीएसएस संघर्षों से बचा जाता है: एक घटक से दूसरे को प्रभावित करने वाली शैलियों के जोखिम को कम करता है।
3. पुन: प्रयोज्यता: ब्लॉक और तत्वों का उपयोग एक परियोजना में कई स्थानों पर किया जा सकता है।
4. रखरखाव में आसान: आपके प्रोजेक्ट के बढ़ने पर भी सीएसएस को अपडेट करना और प्रबंधित करना आसान बनाता है।

दोष:

1. लंबे वर्ग के नाम: बीईएम वर्ग के नाम काफी लंबे हो सकते हैं, जो पहली बार में भारी लग सकते हैं।
2. सीखने की अवस्था: बीईएम संरचना में अभ्यस्त होने में कुछ समय लगता है, खासकर यदि आप सीएसएस में नए हैं।

बीईएम क्यों महत्वपूर्ण है?

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

यदि आप सीएसएस लिखने का एक सुसंगत और मॉड्यूलर तरीका चाहते हैं, तो बीईएम एक उत्कृष्ट विकल्प है। इसे सीखने में कुछ समय लग सकता है, लेकिन लंबे समय में, यह आपका समय बचाएगा और आपका सीएसएस बनाएगा। अधिक रखरखाव योग्य।

निष्कर्ष

बीईएम नामकरण परंपरा आपके सीएसएस को व्यवस्थित और स्केलेबल रखने का एक शानदार तरीका है। यह विवादों से बचने में मदद करता है, आपके कोड को अधिक रखरखाव योग्य बनाता है, और पुन: प्रयोज्य घटकों को बढ़ावा देता है। हालाँकि लंबी कक्षा के नाम और सीखने की अवस्था के कारण यह पहली बार में चुनौतीपूर्ण लग सकता है, लेकिन इसके लाभ नुकसान से कहीं अधिक हैं। यदि आप स्वच्छ सीएसएस लिखना चाहते हैं और अपनी परियोजनाओं में सहयोग में सुधार करना चाहते हैं, तो बीईएम को आज़माएं!

अधिक अपडेट के लिए मुझे फ़ॉलो करें!

मुझे आशा है कि आपको यह लेख सीएसएस बीईएम नामकरण परंपराओं को समझने में मददगार लगा होगा। यदि आप इस तरह के और लेखों, युक्तियों और वेब विकास अंतर्दृष्टि पर अपडेट रहना चाहते हैं, तो मुझे फ़ॉलो करना सुनिश्चित करें। यदि आपका कोई प्रश्न या सुझाव हो तो बेझिझक संपर्क करें। मुझे आपसे सुनना अच्छा लगेगा!