BEM कार्यप्रणाली opencart में स्टिकर के एक उदाहरण के रूप में

चूंकि मैं बीईएम पद्धति को पसंद करता हूं, जब मैंने ऑपनकार्ट के साथ काम करना शुरू किया, तो मैं तुरंत मेरे लिए भयानक चीजों में भाग गया, ये शून्य चयनकर्ता हैं। वे हर जगह हैं! डिफ़ॉल्ट टेम्पलेट से शुरू, लगभग सभी मॉड्यूल और कॉपीराइट टेम्पलेट्स के साथ समाप्त होता है। ऐसा क्यों? मुझे लगता है कि इसके कई कारण हैं:

1. Opencart नेस्टेड सेलेक्टर्स पर डिफ़ॉल्ट रूप से बनाया जाता है, दोनों एक टेम्प्लेट और एक व्यवस्थापक पैनल।
2. अधिकांश डेवलपर्स जो ओपनकेर्ट के साथ काम करते हैं, बैक-एंड डेवलपर्स हैं, उन्होंने बस इस दृष्टिकोण को उठाया
3. कई आवश्यक कक्षाएं और एक आईडी है, जिसके लिए मानक opencart कार्यक्षमता और लेखक के मॉड्यूल दोनों बाध्य हैं, और सभी समान बैक-एंड डेवलपर्स, और उनके अनुयायियों, विभिन्न कारणों से, बस कुछ भी बदलना नहीं चाहते हैं और प्रवाह के साथ जाना चाहते हैं।

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

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

शुरू करने के लिए, मैं समस्या का सार वर्णन करूंगा। घरेलू ऑपनकार्ट असेंबली में से एक में, एक स्टिकर मॉड्यूल एकीकृत है। यह निर्दिष्ट कोण में चयनित स्टीकर प्रदर्शित करता है:
ऊपरी बाएँ / ऊपरी दाएँ / निचले बाएँ / निचले दाएँ
स्टिकर के लिए कोई विकल्प नहीं हैं, लेकिन अधिकतम 4 स्थान हैं:



अब मार्कअप और शैलियों को देखते हैं:



हम क्या देखते हैं:

1. सभी स्टिकर छवि ब्लॉक में एम्बेडेड हैं।
2. इस तथ्य के बावजूद कि छवि ब्लॉक तार्किक रूप से उत्पाद की छवि को संग्रहीत करने के लिए डिज़ाइन किया गया है, सभी स्टिकर शैलियों को इसके साथ बांधा गया है, और अब पूरे सीएसएस को देखें और विशेष रूप से अंतिम लाइनों में नेस्टिंग पर:

/*sticker*/ .image { position: relative; } .image .corner_0, .image .corner_1, .image .corner_2, .image .corner_3 { height: 57px; width: 58px; position: absolute; z-index: 998; } .image .corner_0 { left: 0px; top: 0px; } .image .corner_1 { right: 0px; top: 0px; } .image .corner_2 { left: 0px; bottom: 0px; } .image .corner_3 { right: 0px; bottom: 0px; } .box-product .image .corner_0 img, .box-product .image .corner_1 img, .box-product .image .corner_2 img, .box-product .image .corner_3 img { border: none; padding: 0px; } .box .box-product .image .corner_0 img, .box .box-product .image .corner_1 img, .box .box-product .image .corner_2 img, .box .box-product .image .corner_3 img { width: 60%; } 

अगर .image .corner_2 और भी कम स्वीकार्य लगे, तो .box .box-product .image .corner_2 img पहले से ही इतना आशावादी नहीं दिखता है ... सामान्य तौर पर, हम अनुमान लगा सकते हैं कि कहीं न कहीं हमारे पास .box- उत्पाद बिना माता - पिता के .box है। कुछ शैलियों का उपयोग किया जाता है, लेकिन कहीं न कहीं माता-पिता दूसरों के साथ होते हैं, लेकिन यहां हम कई समस्याओं का सामना करते हैं:

1. यदि स्टिकर को .image के बाहर ले जाया जाता है , तो सभी शैलियाँ गिर जाएँगी, और यदि हम हमारे साथ .image लेते हैं और उन्हें दूसरी जगह रखते हैं, तो .image शैलियाँ लागू करें जहाँ उनकी आवश्यकता नहीं है।
2. यदि आप अचानक एक छवि का नाम बदल देते हैं, जो तार्किक रूप से स्टिकर या .box या .box-उत्पाद के लिए एक भंडार नहीं है, जो कि उच्चतर हैं और निश्चित रूप से यह नहीं कहते हैं कि स्टिकर उनके साथ संलग्न हैं, इनमें से किसी भी मामले में हमें अपेक्षित परिणाम नहीं मिलेगा। ।
3. क्या होगा अगर हम .box-product के साथ सममूल्य पर .image लगाना चाहते हैं? फिर, कुछ गलत हो जाएगा ...
4. ऐसे कई दोहराए जाने वाले चयनकर्ता हैं जिनमें केवल .KOer_ # परिवर्तन होते हैं और यदि हम अचानक इस नेस्टिंग को बदलते हैं या कोड को किसी अन्य टेम्पलेट में स्थानांतरित करना चाहते हैं, तो हमें इसे हर जगह बदलना होगा, और अभी भी मीडिया क्वेरी हो सकती है, यह सिर्फ समय की बर्बादी है।
5. बढ़ी हुई विशिष्टता। यह समस्या हमेशा थोड़ी देर के बाद ध्यान देने योग्य हो जाती है और अक्सर उन लोगों के कंधों पर टिकी होती है जिन्होंने इसे नहीं बनाया ...

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

चूंकि मुख्य कार्यों में से एक कोड का पुन: उपयोग करने की क्षमता है, इसलिए हम अपने स्टिकर कोने को पहले की तरह नाम नहीं दे सकते, क्योंकि शायद किसी अन्य परियोजना में हम उन्हें कोनों में नहीं, बल्कि प्रत्येक पक्ष के मध्य में या यहां तक ​​कि पंक्तिबद्ध करना चाहते हैं, इसलिए क्रमशः इसे केवल स्टिकर कहना तर्कसंगत होगा, लेकिन बाहरी ब्लॉकों पर निर्भर नहीं होने के लिए, हमारे स्टिकर्स को स्टिकर कंटेनर में डालें, जो उत्पाद के कार्ड में किसी भी ब्लॉक के लिए एक स्वतंत्र ब्लॉक या मिश्रण हो सकता है। परिणाम:



बाहरी रूप से, हमें एक ही परिणाम मिला, लेकिन मार्कअप और स्टाइल अब अलग हैं:

 /* stickers */ .stickers { position: relative; } .sticker { } .sticker_position_0 { position: absolute; left: 0px; top: 0px; } .sticker_position_1 { position: absolute; right: 0px; top: 0px; } .sticker_position_2 { position: absolute; left: 0px; bottom: 0px; } .sticker_position_3 { position: absolute; right: 0px; bottom: 0px; } .sticker__img { border: none; padding: 0; } 

जैसा कि मैंने पहले कहा था, .stickers कंटेनर या तो एक स्वतंत्र इकाई या उत्पाद कार्ड में किसी भी इकाई के लिए मिश्रण हो सकता है। इस मामले में, हमने उन्हें अपने असाइनमेंट को विभाजित करके .image ब्लॉक में मिलाया।

प्रत्येक स्टिकर में एक क्लास .sticker होती है , जिसमें सभी स्टिक्स के लिए आम शैली होती है, उदाहरण के लिए, आकार। लेकिन हम स्थिति कुंजी के साथ संशोधक में स्थिति के लिए जिम्मेदार शैलियों को बाहर निकालते हैं:



नोट:
.sticker एक तत्व के रूप में हो सकता है।

 <div class="stickers"> <div class="stickers__sticker sticker sticker_position_2"> <img class="sticker__img " src="#"> </div> </div> 

संदर्भ स्टिकर के बिना डॉट प्लेसमेंट के लिए एक स्वतंत्र ब्लॉक।

अब कलाई की एक झाड़ के साथ, आप कहीं भी स्टिकर लगा सकते हैं। उदाहरण के लिए, आप छड़ें छवि से बाहर ले जा सकते हैं और उत्पाद कंटेनर में पूरे उत्पाद कार्ड पर लागू कर सकते हैं:



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

इन चयनकर्ताओं के साथ अभी भी एक अनसुलझी समस्या है, जिसे पहले आंखें कहती थीं:

 .box-product .image .corner_3 img {....} .box .box-product .image .corner_2 img {....} 

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

 .box-product .sticker__img {...} .box .sticker__img {...} 

निष्कर्ष

यह एक बहुत छोटा सा कोड है जो बहुत मायने रखता है।

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

अंत तक पढ़ने वाले सभी को धन्यवाद और मुझे उम्मीद है कि मेरा लेख उपयोगी था।