बीईएम, अगले स्तर

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

मैं BEM पद्धति को व्यवहार में लागू करने के लिए कई विकल्पों में से एक पर विचार करने का प्रयास करूंगा, जो न केवल आत्मा से मेल खाती है, बल्कि रचनाकारों की सिफारिशों के अनुरूप भी है।

मेरी राय में, बीईएम की मुख्य समस्या जटिल और लंबे नामों में नहीं है, या कैस्केड की अनुपस्थिति में (जो वैसे भी हमेशा सच नहीं होती है)। और बहुतों की गलतफहमी में कि उन्हें इसकी आवश्यकता क्यों है। हाथ से पहले से ही कठिन HTML कोड लिखने के लिए, राक्षसी वर्ग के नाम जोड़ने के लिए, जिससे कोड और भी अधिक जमा हो जाता है, ओह मैं नहीं करना चाहता। और 3,000 से अधिक लाइनों की लंबाई के साथ सीएसएस आम तौर पर गैगिंग का कारण बना। और बीईएम बुनियादी ढांचे से परिचित होने के बाद ही मैंने इस दृष्टिकोण के सभी आकर्षण को समझा। यहां हम बीईएम रचनाकारों द्वारा विकसित उपकरणों को छोड़कर, कार्यान्वयन पर ध्यान केंद्रित करने और पूरी प्रक्रिया को बेहतर ढंग से समझने के लिए दृष्टिकोण पर विचार करेंगे।

इसके लिए, मैंने Node.js, एक्सप्रेस फ्रेमवर्क का उपयोग किया, इसे मानक जेड टेम्पलेट इंजन और CSS स्टाइलस प्रीप्रोसेसर के साथ स्थापित किया।

यह परियोजना स्वयं यहाँ है: github.com/jchouse/bem-school_type_middle
स्टार्टअप के निर्देश पढ़ें।

यदि आप ध्यान से BEM के बारे में लेख पढ़ते हैं , तो आप देख सकते हैं कि BEM केवल लंबी कक्षाएं नहीं है, बल्कि एक विशिष्ट फ़ाइल संरचना भी है। पहले चीजें पहले, एक फ़ोल्डर बनाएं जहां हम बीईएम ब्लॉकों को संग्रहीत करेंगे।

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

हम जानकारी के साथ एक साधारण वस्तु तैयार करेंगे (बेशक, इसे डेटाबेस से एकत्र किया जा सकता है, या हार्डकोड किया जा सकता है):
मार्गों / index.js

res.render('index', { title: 'BEM  ', menu: [ { url: '#home', content: '' }, { url: '#port', content: '' }, ........... 

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

पृष्ठ टेम्पलेट में न्यूनतम कोड, केवल सबसे आवश्यक है।
views / index.jade

 extends ../blocks/page/page block content include ../blocks/content/content 

यदि संभव हो, तो ब्लॉक के अंदर एक ब्लॉक का वर्णन करने वाले सभी कोड रखें।
यह पृष्ठ का आवरण है जो अपरिवर्तित रहता है (शीर्षक, पाद लेख आदि):
ब्लॉक / पेज / पेज.जेड

 doctype 5 html include ../head/head body.page div.page__wrapper include ../main-menu/main-menu block content include ../footer/footer 

मुख्य मेनू:
ब्लॉक / मुख्य-मेनू / मुख्य-मेनू.जेड

 ul.main-menu.main-menu_type_horiz each item in menu li.main-menu__item a(href='#{item.url}')= item.content 

सामान्य सीएसएस में, हम केवल आयात लिखते हैं, शैलियाँ स्वयं ब्लॉक के संगत फ़ोल्डर में होती हैं।
सामान्य शैली, सभी ब्लॉकों को आयात करने के लिए उपयोग की जाती है:
सार्वजनिक / स्टाइलशीट / स्टाइल.स्टाइल

 @import '../../blocks/page/page' @import '../../blocks/main-menu/main-menu' @import '../../blocks/footer/footer' 

एक ब्लॉक की शैलियाँ, स्वयं ब्लॉक का वर्णन करती हैं, साथ ही साथ संशोधक और तत्वों की शैलियों का आयात भी करती हैं।
ब्लॉक / मुख्य-मेनू / मुख्य-मेनू.स्टाइल

 .main-menu margin: 0; padding: 0; text-align: center; list-style-type: none; //  @import '_type/main-menu_type_horiz' //  @import '__item/main-menu__item' 

एक ब्लॉक की शैलियाँ:
वर्ग का जटिल नाम इंगित करता है, सबसे पहले, वह स्थान जहां आप इस शैली को पा सकते हैं, बिना दस्तावेज़ खोज या पूरे दस्तावेज़ को स्क्रॉल किए बिना।



यह सब काम करने के लिए, मैंने आंतरिक आयात तत्वों को लागू किया, सभी निर्भरता को अपने हाथों से लिखा।

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

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

विपक्ष:

1. सभी जानकारी एक वस्तु में संग्रहीत की जाती है, पूरे पृष्ठ के लिए आम है, इसलिए ब्लॉक पूरी तरह से स्वतंत्र नहीं हैं। आपको सावधानीपूर्वक कुंजियों की निगरानी करने की आवश्यकता है। और तुरंत सब कुछ ध्यान से दस्तावेज़ करना बेहतर है;
2. बेशक, यह वास्तव में आपको परेशान करता है कि छोटे दोहराए जाने वाले ब्लॉक (बटन, उदाहरण के लिए), जो पृष्ठ पर कई हैं, लेकिन विभिन्न वातावरणों में, बहुत सावधानी से आयात करना होगा। शायद स्क्रीन का उपयोग करने के लिए ...
3. हम सभी निर्भरता को कलम से लिखते हैं। बेशक आप इसके लिए एक स्क्रिप्ट लिख सकते हैं;
4. संशोधक अभी HTML मार्कअप और जेएस को प्रभावित नहीं करते हैं।

सभी समस्याओं को bem-bl + bem-tools द्वारा हल किया जाता है। हम अगले लेख में एक साधारण परियोजना के लिए इन दो उपकरणों का उपयोग करने के तरीके के बारे में बात करेंगे।

UPD: साथियों माइनस, मैं समझता हूं कि मेरा लेखन कौशल परिपूर्ण से दूर है, और मैं किसी भी रचनात्मक आलोचना का स्वागत करता हूं। बस इसे लेख में टिप्पणियों में छोड़ना मत भूलना। धन्यवाद :)