"BEM'a समस्या" की समस्या क्या है?

ऐसा लगता है कि कोड की 30 लाइनों का सप्ताह समाप्त हो गया है, और इसके बजाय, बीईएम सप्ताह स्पष्ट रूप से आ गया है। इसके अलावा, विषयों के बजाय एक अजीब अनुक्रम का पता लगाया जा सकता है:

• 15 मिनट में पृष्ठ लेआउट।
• बीईएम में यह बेहतर होगा!
• आप खुद ही अपने बोहेम खाएं, मेरे पास प्रीप्रोसेसर हैं!

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

वास्तव में, मैं बहुत समय पहले बीईएम में रुचि रखता था, इस विचार को पसंद किया, इसमें तल्लीन करने की कोशिश की, इसे व्यवहार में लाने की कोशिश की, लेकिन किसी तरह यह काम नहीं किया, मुझे पता नहीं क्यों। मैंने कई दृष्टिकोण बनाए, लेकिन अंत में मेरी परियोजना BEM'a को लागू करने के प्रयासों की भयानक गड़बड़ी में बदल गई, और "क्रिस्टल शब्दार्थ HTML (CSS +) के विचार (जिसे मैंने BEM'e में निराश कर दिया)। वास्तव में, यह मुझे अब तक दुखी करता है और परियोजना पर काम करने के दर्द को दैनिक खुशी देता है । काटा के पॉप-अप लेख और उन पर टिप्पणियों ने लेआउट के शब्दार्थ, मुझ पर ब्राउज़रों के डिजाइन, बीईएम, प्रीप्रोसेसर और सभी, एक तरह से या किसी अन्य, विचारधाराओं, पद्धति, तकनीक और अन्य चीजों के विषय से संबंधित भावनाओं का एक तूफान पैदा कर दिया। चूंकि बीईएम को लागू करने के लिए मेरा व्यक्तिगत दृष्टिकोण विफल रहा, लेकिन कार्यप्रणाली को लागू करने का तार्किक औचित्य अभी भी मेरे सिर में घूम रहा है, प्रत्येक लेख और प्रत्येक टिप्पणी में मैंने उस सच्चाई को खोजने की कोशिश की जो किसी तरह मेरे सवालों का जवाब देगी और अंत में बनेगी बीईएम के लिए मेरा व्यक्तिगत रवैया। अजीब तरह से पर्याप्त, एक बिंदु पर, यह हुआ। यह कैसे हुआ और मैं आपको बताने की कोशिश क्यों करूंगा।

एक सामान्य होलीवर पर विचार करें

पात्र

शब्दार्थ - डेमिंग बीईएम।
Bamer BEM का एक अनुयायी है।

अधिनियम I: द बिगिनिंग

Semantist

मेनू संरचना लिखते हैं।

<nav> <ul class="top-menu"> <li><a href="/home/">HOME</a></li> <li class="active">ABOUT US</li> <li><a href="/services/">SERVICES</a></li> <li><a href="/partners/">PARTNERS</a></li> <li><a href="/customers/">CUSTOMERS</a></li> <li><a href="/projects/">PROJECTS</a></li> <li><a href="/careers/">CAREERS</a></li> <li><a href="/contact/">CONTACT</a></li> </ul> </nav> 

हमने मेनू लिखा, कक्षाओं को इसे जकड़ें।

 nav a { text-decoration: none; } nav ul { margin: 0; padding: 0; } nav li { list-style-position: inside; font: 14px 'Oswald', sans-serif; padding: 10px; } .top-menu li { display: inline-block; padding: 10px 30px; margin: 0; } .top-menu li.active { background: #29c5e6; color: #fff; } .top-menu a { color: #b2b2b2; } 

Bemer

आप संरचना और कैस्केड पर भरोसा करते हैं - पहले संपादन में सब कुछ अलग हो जाएगा। यह अधिक सही होगा:
HTML:

 <div class="b-menu"> <a href="#" class='b-link b-link_menu b-link_menu_active' >HOME</a> <a href="#" class='b-link b-link_menu' >ABOUT US</a> <a href="#" class='b-link b-link_menu'>SERVICES</a> <a href="#" class='b-link b-link_menu'>PARTNERS</a> <a href="#" class='b-link b-link_menu'>CUSTOMERS</a> <a href="#" class='b-link b-link_menu'>PROJECTS</a> <a href="#" class='b-link b-link_menu'>CAREERS</a> <a href="#" class='b-link b-link_menu'>CONTACT</a> </div> 

सीएसएस:

 .b-menu { margin:0; padding:0; list-style:none; width:100%; display:table; table-layout: fixed; } .b-link_menu { text-align:center; color:#bfbfbf; cursor:pointer; font-size:14px; height:38px; background-color:#f3f3f3; line-height:38px; border: 1px solid #e7e7e7; display:table-cell; text-decoration: none; } .b-link_menu_active { color:#fefefe; background-color:#29c5e6; border:1px solid #29c5e6; } 

इस दृष्टिकोण के साथ, आपको शैलियों को अलग किए बिना HTML की संरचना को बदलना नहीं होगा।

अधिनियम II: गलतफहमी

Semantist

कक्षाओं का एक समूह बनाने का क्या मतलब है? क्या इनलाइन शैलियों को पंजीकृत करना आसान और छोटा नहीं है? CSS फ़ाइल क्यों बढ़ाई जाती है? कुछ भी स्पष्ट नहीं है!

Bemer

ब्राउज़र द्वारा संसाधित किए जाने पर कक्षाएं यथासंभव विशिष्ट होती हैं , और अध्ययन बताते हैं कि यह आधुनिक दुनिया में एक भूमिका निभाता है तेजी से काम किया जाएगा। इनलाइन शैलियों को पूरे प्रोजेक्ट में फैलाया जाएगा और उनका समर्थन यथासंभव कठिन होगा। परिवर्तन करते समय लेआउट को भरने की तुलना में CSS फ़ाइल को बढ़ाना बेहतर है।

Semantist

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

अधिनियम III: दूसरे आयाम में संक्रमण

Bemer

क्या आप अभी भी अपने हाथों से HTML लिख रहे हैं? आखिरकार, हमारे पास bemhtml और bemjson जैसे अद्भुत तत्व हैं - आप कक्षाओं का वर्णन करते हैं (जो, संयोग से, बार-बार इस्तेमाल किया जा सकता है), दस्तावेज़ संरचना और सामग्री में उनकी स्थिति, और उपकरण आपके लिए HTML मार्कअप उत्पन्न करते हैं, और सब कुछ अलमारियों में डालते हैं। इसलिए, आपको सीधे HTML को छूने की आवश्यकता नहीं है।

Semantist

मुझे किसी भी उपकरण का उपयोग क्यों करना चाहिए? मैं HTML और CSS प्रीप्रोसेसरों का बेहतर उपयोग कर रहा हूं - प्रभाव समान होगा लेकिन कोड छोटा है और सब कुछ बहुत अधिक स्पष्ट और दृश्य है।

अधिनियम IV: इंटरचेंज

Bemer

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

Semantist

सभी समान, मैं आपके दृष्टिकोण के किसी भी लाभ को नहीं देखता, सब कुछ बस जटिल हो जाता है और कुछ अतिरिक्त उपकरणों के साथ बढ़ जाता है! मेरा दृष्टिकोण बेहतर है, क्योंकि मैं कई वर्षों से काम कर रहा हूं और मेरे लिए कुछ भी नहीं गिरा है।

* अलग-अलग कोणों से विचारों के विचलन पर जोर देने के लिए, होलियर के वर्णन का अधिकांश जानबूझकर अतिरंजित, संदर्भ से बाहर रखा गया है, आदि।

"BEM'a समस्याएं"

ऊपर वर्णित सभी होलीवर का अर्थ अनिवार्य रूप से "वार्म के साथ वार्म" की तुलना करने के तर्क में होता है, बस "वार्म" और "सॉफ्ट" द्वारा प्रत्येक डेवलपर का मतलब अलग-अलग सार भी होता है। और यह BEM की मुख्य समस्या है और जिन लोगों ने "दर्ज" नहीं किया है - कार्यप्रणाली के लेखकों ने इन 3 अक्षरों में बहुत अधिक अर्थ डाला है, इस वजह से जो लोग कार्यप्रणाली के साथ काम नहीं करते थे, वे अपने अनुभव के "कीहोल" के माध्यम से इसका केवल एक हिस्सा देखते हैं और ब्रह्मांड। और यह समझने के लिए कि वे इसके साथ क्यों आए और इसके आवेदन का क्या बिंदु है, आपको जानकारी का एक गुच्छा फिर से पढ़ने की जरूरत है, इसमें कारण संबंधों की पहचान करें, इसकी आदत डालें, और यह सब समझने के लिए "क्यों?"। लेखक स्वयं तर्क-वितर्क के लिए अपनी कार्यप्रणाली के टुकड़ों को फाड़ देते हैं और इन सभी असमान टुकड़ों को BEM कहा जाता है।

एक ओर, बीईएम केवल नामकरण वर्गों के लिए सिद्धांत हैं। बहुत विचार "ब्लॉक एलीमेंट संशोधक" काफी तार्किक लगता है - हम .b उदाहरण ब्लॉक और .b -example__element तत्वों के साथ सभी संस्थाओं का वर्णन करते हैं, कुछ ब्लॉक और तत्वों के लिए हम उनमें उपयोग करते हैं।। और यह दृष्टिकोण आपको कक्षाओं की दृश्यता बढ़ाने और केवल नाम से ब्लॉक से संबंधित होने की अनुमति देता है।

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

और सबसे दिलचस्प बात यह है कि आगे की कार्यप्रणाली विकसित होती है, और अधिक अर्थ इन 3 अक्षरों में निवेश किया जाता है:

BEM - HTML संरचना बनाने में मैनुअल दृष्टिकोण का परित्याग। हम JSON में (इस मामले में, एक विशिष्ट BEMJSON में) सभी वर्गों का वर्णन करते हैं, हम एक दस्तावेज़ संरचना और वर्ग संबंध बनाते हैं - एक विशेष उपकरण (bemhtml) संबंधित HTML उत्पन्न करता है - सब कुछ महान है और सभी लोग खुश हैं।

बीईएम - जेएस उत्पन्न करने की क्षमता पहले से उत्पन्न HTML के साथ काम करने के लिए। * मैं इस बिंदु पर कुछ भी सार्थक नहीं कह सकता, क्योंकि मैंने उसके साथ काम नहीं किया है, मुझे आशा है कि जानकार लोग आपको बताएंगे।

"बुराई की जड़"

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

इन सभी विचारों को, वास्तव में एनएसए के संदर्भ में टिप्पणियों में से एक द्वारा प्रेरित किया गया था। और यह मेरे लिए पूरी तरह से समझ में नहीं आता है कि "अति स्वतंत्र ब्लॉक" या "गैर-विकृत ब्लॉक" के रूप में इस तरह के एक अत्यंत समझदार शब्द से दूर जाने के लिए क्यों आवश्यक था, एक अतिरिक्त अमूर्तता "ब्लॉक तत्व संशोधक" का परिचय, जिसे हर बार समझाया और चबाया जाना चाहिए।

समस्या का एक तार्किक समाधान, यह मुझे लगता है, इस तरह के वैश्विक अमूर्तता को छोटे लोगों में विघटित करना है, प्रत्येक छोटे अमूर्त ("बीईएम का क्षेत्र") के लिए शब्दावली का लगातार परिचय, जो संयोगवश, बीईएम की विचारधारा - स्वतंत्रता को भी प्रतिबिंबित करेगा। प्रत्येक अमूर्त का उपयोग और शोधन।

एक निष्कर्ष के बजाय।

व्यक्तिगत रूप से, मैंने बीईएम पर फैसला किया:

• स्वतंत्र ब्लॉकों का उपयोग करने की भावना है, और निश्चित रूप से मैं उनका उपयोग करूंगा;
• मैं वास्तव में कक्षाओं के नामकरण के नियमों को पसंद नहीं करता - यह अक्सर बहुत अधिक अनावश्यक होता है (मेरा तर्क है कि बड़ी परियोजनाओं में यह एक रामबाण हो सकता है), शायद मैं थोड़ा संशोधित दृष्टिकोण का उपयोग करूंगा;
• बीईएम के उपकरण मुझे बेमानी लगते हैं, कम से कम मेरे वर्तमान कार्यों के लिए, शायद भविष्य में मैं उन पर अधिक विस्तार से विचार करूंगा