🔆 🦔 🧒🏾 सुविधाजनक बीईएम 🚵🏾 🌕 📪

नमस्ते। इस लेख में मैं आपको बताऊंगा कि आप BEM को कैसे बदल सकते हैं, इसकी सबसे अच्छी विशेषताओं को बनाए रख सकते हैं और सबसे खराब से छुटकारा पा सकते हैं।

तो पहले, आइए इस बारे में बात करें कि BEM में क्या गलत है? शायद कुछ भी बदलने की जरूरत नहीं है और सब कुछ इतना अच्छा है?

BEM एक पद्धति है जो आपको कई बार CSS / HTML / JS का उपयोग करने की अनुमति देती है। वह ब्लॉक, तत्व, संशोधक और मिश्रण की अवधारणाओं का परिचय देती है। इसका उपयोग करना शुरू करते हुए, आप समझते हैं कि यह वही है जो आप कई वर्षों से इंतजार कर रहे हैं, यह इतना सुविधाजनक, स्पष्ट और सुंदर है! लेकिन कुछ समय बाद, विकास में ऐसे क्षण आने लगते हैं जिन्हें बीईएम के साथ हल किया जा सकता है, लेकिन इससे या तो खुशी नहीं मिलती है या, सबसे महत्वपूर्ण बात, लाभ होता है। मैं किस बारे में बात कर रहा हूँ? आइए इन बिंदुओं से गुजरें:

1. डिस्पोजेबल ब्लॉक और आइटम

इस समस्या ने मुझे इतना परेशान किया कि मुझे यह लेख लिखने के लिए मजबूर होना पड़ा।

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

उदाहरण के लिए, हमें निम्नलिखित करने की आवश्यकता है: पृष्ठ पर एक शीर्षक रखें, उसके बाद एक पाठ फ़ील्ड और एक भेजें बटन, जैसा कि चित्र में दिखाया गया है:

हम बीईएम के अनुसार क्या करेंगे? कई विकल्प हैं:

एक प्रपत्र ब्लॉक और उसके तत्व बनाएँ: शीर्षक, बटन, पाठ क्षेत्र
प्रत्येक घटक (बटन, टेक्स्ट बॉक्स, शीर्षक) के लिए अलग-अलग ब्लॉक बनाएं, साथ ही फॉर्म के लिए भी
...

हम जो भी चुनते हैं, हमें एक समस्या होगी: इन सभी ब्लॉकों के बीच इंडेंटेशन कैसे सेट करें?

यदि हमने पहला विकल्प चुना, तो हम फॉर्म के तत्वों को इंडेंट करने का निर्णय ले सकते हैं, क्योंकि यह कार्यप्रणाली का विरोध नहीं करता है। हालांकि, इस मामले में, हम ब्लॉक के सार को नष्ट कर देते हैं: इसका पुन: उपयोग नहीं किया जा सकता है, क्योंकि इसका आंतरिक मार्कअप केवल वर्तमान स्थिति में फिट होगा।

यदि हमने दूसरा विकल्प चुना है, तो कुछ ब्लॉक को फॉर्म में और इस ब्लॉक के तत्वों को फॉर्म के घटकों के साथ मिलाना संभव होगा। और, तदनुसार, बस बनाए गए ब्लॉक के तत्वों के लिए, इंडेंटेशन सेट करें। और यहां एक बार के ब्लॉक की समस्या दिखाई देती है: वे केवल एक ही स्थान पर उपयोग के लिए बनाए गए हैं! उनका अब उपयोग नहीं किया जा सकता है क्योंकि घटक अन्य पृष्ठों पर अलग-अलग स्थित होंगे।

यह समस्या एक बार के ब्लॉक / तत्वों को जन्म देती है, साथ ही प्रकारों की संशोधक ___size_ या ___place_---- (इंडेंटेशन सेट करने के लिए), जो, जैसा कि पहले ही कहा जा चुका है, दोनों मार्कअप फ़ाइलों और अव्यवस्था को अपने स्वयं के निर्देशिकाओं के साथ प्रयोग किया जाता है। और फ़ाइलें।

यह न केवल इंडेंटेशन पर लागू होता है, बल्कि आकार (बटन के लिए) को ब्लॉक करने के लिए भी लागू होता है, उदाहरण के लिए, यह अक्सर line-height में परिवर्तन की ओर जाता है), फ़ॉन्ट आकार, इंडेंटेशन, आदि।

2. लंबी श्रेणी के नाम

बात करने के लिए बहुत कुछ नहीं है मुझे नहीं लगता कि किसी को भी मार्कअप पसंद है जो कुछ इस तरह दिखता है:

 <header class="section-header section-header_margin_select-sector"> <h2 class="section-header__title font font_face_calibri-bold section-header__title_size_select-sectors"> Select a sector, please: </h2> </header>

3. डिफ़ॉल्ट मान या ब्लॉक थीम

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

लेकिन इस दृष्टिकोण के साथ, निम्नलिखित बदल जाएगा:

 <input type="text" class="textbox textbox_theme_P2"> <button class="button button_theme_P2">Reset</button> <button class="button button_theme_P2">Submit</button> <button class="button button_theme_P2">Save as draft</button>

यह कोड का एक अव्यवस्था है, और यह खराब है।

आप आलोचना करते हैं - प्रस्ताव

इस अपमान को सुधारने के लिए मुझे क्या प्रस्ताव देना चाहिए? मैं निम्नलिखित प्रकट करने का प्रस्ताव करता हूं, जो अनिवार्य रूप से मानक बीईएम पर एक ऐड-ऑन है।

मेनिफेस्टो - बेहतर बीईएम

A.1 मॉड्यूल और पृष्ठ परत की परत

मैं शैली को दो भागों में तोड़ने का प्रस्ताव करता हूं:

पहला भाग घटकों की परत है। यह भाग सभी (लगभग *) बीईएम नियमों के अनुसार लिखा गया है। यह पुन: प्रयोज्य ब्लॉकों के लिए शैलियों को सेट करता है, या, बल्कि, घटकों, उदाहरण के लिए, एक बटन, पाठ क्षेत्र, शीर्षक, आदि के लिए।

अन्य भाग पृष्ठ परत है। किसी विशेष पृष्ठ के ब्लॉक और तत्वों की शैलियों को सेट करना आवश्यक है। तदनुसार, इन ब्लॉकों / तत्वों का उपयोग एक बार (किसी भी मामले में, एक पृष्ठ पर) किया जाएगा। बीईएम के नियम यहां लागू नहीं होते हैं। यह इस तरह दिखता है:

फ़ाइल: index.css

 .___send-button { margin-bottom: 2px; font-size: 13px; } .___message-textarea { width: 240px; height: 300px; font-size: 14px; }

पृष्ठ लेआउट फ़ाइल का नाम वैकल्पिक है। मुख्य बात यह है कि यह पृष्ठ के सार से मेल खाता है। सभी शैलियों की शुरुआत '___' से होती है ताकि वे मानक BEM इकाई वर्गों के साथ भ्रमित न हो सकें। इसके अलावा, वर्ग बीईएम संस्थाओं से बंधे नहीं हैं - उनके नाम केवल यह दर्शाते हैं कि उन्हें क्या लागू किया जाना चाहिए। यह भी ध्यान देने योग्य है कि पृष्ठ लेआउट की सभी शैलियाँ एक फ़ाइल में स्थित हैं, क्योंकि वे एक पृष्ठ से संबंधित हैं।

यह पृथक्करण हमें BEM के मुख्य लक्ष्य के पक्षपात के बिना, पहली समस्या को हल करने की अनुमति देता है - शैलियों / मार्कअप का निर्माण करना ताकि उनका पुन: उपयोग किया जा सके। इन शैलियों को केवल एक पृष्ठ पर लागू किया जाएगा और किसी भी तरह से घटक लेआउट से घटकों की शैली में हस्तक्षेप नहीं करेंगे। इस प्रकार, हम एक बार की कक्षाओं से छुटकारा पा लेते हैं, जबकि ब्लॉकों के पुन: उपयोग की क्षमता बनाए रखते हैं और गुंजाइश का उल्लंघन किए बिना।

यह निर्देशिका स्तर पर अलग घटकों और पृष्ठ लेआउट के लिए भी समझ में आता है।

* उन नियमों को छोड़कर जो प्रकट के निम्नलिखित पैराग्राफों द्वारा रद्द किए जाते हैं।

A.2 लंबे वर्ग के नाम

(प्रायोगिक, इसलिए वैकल्पिक आइटम *)

यह निम्नलिखित के साथ मानक नामकरण प्रणाली के भाग को बदलने का प्रस्ताव है:

ब्लॉक के लिए: class="" (कोई परिवर्तन नहीं)
एक संशोधक के साथ एक ब्लॉक के लिए: class=" _" (संयुक्त चयनकर्ता के माध्यम से पहुंच। .._ )
एक तत्व के लिए: class="__" (कोई परिवर्तन नहीं)
एक संशोधक के साथ एक तत्व के लिए: class="__ _" (पहुंच के माध्यम से .__._ )

यह आइटम आपको संशोधक के बारे में एक छोटा कोड प्राप्त करने की अनुमति देता है। जाहिर है, तत्वों के साथ भी ऐसा नहीं किया जा सकता है।

यह महत्वपूर्ण है कि शैलियों वाली फाइलों में चयनकर्ताओं के लिए परिभाषित नियम नहीं होते हैं जिनमें केवल संशोधक शामिल होते हैं:

 /*!!!*/ ._active { background-color: #abcdef; }

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

A.3 चूक और थीम

यहां सब कुछ सरल है। यह एक डिफ़ॉल्ट थीम चुनने का प्रस्ताव है, लेकिन इसके लिए शैलियों को निर्धारित करने के लिए ब्लॉक फ़ाइल में नहीं है, बल्कि ब्लॉक वर्ग में है जिसे थीम फ़ाइल में रखा जाना चाहिए। उदाहरण के लिए:

फ़ाइल - button/button.css

 .button { cursor: pointer; display: inline-block; }

फ़ाइल - button/_theme/button_theme_P2.css

 .button_theme_P2, .button { border-radius: 3px; border: 1px solid #f00; }

या पैराग्राफ 2 के अनुसार

 .button._theme_P2, .button { border-radius: 3px; border: 1px solid #f00; }

इस प्रकार, यह विषय मानक बन जाता है, लेकिन आप चाहें तो इसे सीधे उपयोग कर सकते हैं।

परिणाम

यह घोषणापत्र BEM के अनुसार लेआउट के दौरान आने वाली कुछ समस्याओं को हल करने के लिए बनाया गया है। इसका मुख्य घटक घटकों लेआउट और पृष्ठ लेआउट में एक टूटना था। यद्यपि घोषणापत्र काफी क्रांतिकारी, अलौकिक और निर्भीक दिखता है, यह वर्णित समस्याओं को हल करता है। इसका उपयोग करने के लिए, आंशिक रूप से या बिल्कुल भी इसका उपयोग नहीं करने के लिए - बेशक, आप तय करते हैं।

PS यदि आप अब माइनस डालने के लिए पूरे पृष्ठ को स्क्रॉल कर रहे हैं, तो टिप्पणी लिखना न भूलें, अन्यथा आपके माइनस को कोई लाभ नहीं होगा ( ~~साथ ही साथ प्रकट~~ )।

सुविधाजनक बीईएम