CSS
सीएसएस डिजाइन पैटर्न

परिचय

टिप्पणियों

कार्यलय

बीईएम का मतलब Blocks, Elements and Modifiers । यह शुरू में रूसी तकनीक कंपनी यांडेक्स द्वारा कल्पना की गई एक पद्धति है, लेकिन जिसने अमेरिकी और पश्चिमी-यूरोपीय वेब डेवलपर्स के बीच काफी कर्षण प्राप्त किया।

जैसा कि कहा जाता है, BEM मेथोलोजी आपके HTML और CSS कोड के तीन प्रकार के घटकों के मानकीकरण के बारे में है:

• ब्लॉक: स्वसंपूर्ण संस्थाएं जो अपने दम पर सार्थक हैं

  उदाहरण header , container , menu , checkbox और textbox

• तत्व: उन ब्लॉकों का हिस्सा जिनके कोई स्टैंडअलोन अर्थ नहीं हैं और शब्दार्थ उनके ब्लॉकों से बंधा हुआ है।

  उदाहरण menu item , list item , checkbox caption और header title

• संशोधक: एक ब्लॉक या तत्व पर झंडे, जिसका उपयोग उपस्थिति या व्यवहार को बदलने के लिए किया जाता है

  उदाहरण disabled , highlighted , checked , fixed , size big और color yellow

बीईएम का लक्ष्य अपने सीएसएस कोड की पठनीयता, स्थिरता और लचीलेपन का अनुकूलन करना है। इसे प्राप्त करने का तरीका, निम्नलिखित नियमों को लागू करना है।

• ब्लॉक शैलियों कभी भी एक पृष्ठ पर अन्य तत्वों पर निर्भर नहीं होती हैं
• ब्लाकों एक सरल, लघु नाम और बचने होना चाहिए _ या - वर्ण
• जब तत्वों को स्टाइल करते हैं, तो blockname__elementname प्रारूप blockname__elementname चयनकर्ताओं का उपयोग करें
• संशोधक को स्टाइल करते समय, प्रारूप blockname--modifiername और blockname__elementname--modifiername चयनकर्ताओं का उपयोग करें
• ऐसे तत्व या ब्लॉक जिनके पास संशोधक है उन्हें ब्लॉक या तत्व से सब कुछ प्राप्त करना चाहिए, यह संशोधित करना है गुणों को छोड़कर संशोधक को संशोधित करना चाहिए

कोड उदाहरण

यदि आप अपने फार्म तत्वों पर BEM लागू करते हैं, तो आपके CSS चयनकर्ताओं को कुछ इस तरह दिखना चाहिए:

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

संबंधित HTML को कुछ इस तरह दिखना चाहिए:

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>