मेरा एक सहकर्मी एक ऐसी परियोजना में सीएसएस के लिए BEM (ब्लॉक एलीमेंट मॉडिफ़ायर) विधि पर जोर दे रहा है, जिसमें वह हेलिंग कर रहा है, और मैं अभी यह समझ नहीं पा रहा हूं कि हम इसे सालों से लिख रहे LESS CSS से बेहतर बनाते हैं।
बीईएम एक सीएसएस पद्धति है। अन्य में OOCSS और SMACSS शामिल हैं। इन पद्धतियों का उपयोग मॉड्यूलर, एक्स्टेंसिबल, पुन: प्रयोज्य कोड लिखने के लिए किया जाता है जो बड़े पैमाने पर अच्छा प्रदर्शन करता है।
LESS एक सीएसएस प्रीप्रोसेसर है। अन्य लोगों में सास और स्टाइलस शामिल हैं। इन प्रीप्रोसेसरों का उपयोग अपने संबंधित स्रोतों को विस्तारित सीएसएस में बदलने के लिए किया जाता है।
बीईएम और लेस एक दूसरे से "बेहतर" होने के रूप में तुलनीय नहीं हैं, वे ऐसे उपकरण हैं जो विभिन्न उद्देश्यों की सेवा करते हैं। आप यह नहीं कहेंगे कि किसी विशेष समस्या को हल करने के लिए उपयोगिता पर विचार करने के अलावा, एक पेचकश हथौड़ा से बेहतर है।
वह "उच्च प्रदर्शन" का दावा करता है ...
प्रदर्शन को शास्त्रीय सीएसएस शैली के बीच मापा जाना चाहिए:
.widget .header
और BEM शैली:
.widget__header
लेकिन आम तौर पर बोलते हुए, CSS चयनकर्ता प्रदर्शन एक अड़चन नहीं है, और इसे अनुकूलित करने की आवश्यकता नहीं है।
BEM "प्रदर्शन" आमतौर पर एक डेवलपर के प्रदर्शन लेखन कोड के संबंध में होता है। यदि BEM पद्धति का लगातार और सही तरीके से उपयोग किया जाता है, तो डेवलपर्स के समूहों के लिए शैली टकराव के बिना अलग-अलग मॉड्यूल को एक साथ लेखक के लिए आसान है।
वह "पठनीयता" और "पुनः उपयोग" का दावा करता है ...
मुझे नहीं पता कि मैं एक नए डेवलपर को बताऊंगा कि BEM अधिक पठनीय है। मैं कह सकता हूं कि यह कक्षाओं के अर्थ और संरचना के रूप में कुछ अच्छी तरह से परिभाषित दिशानिर्देश प्रदान करता है।
जैसे कोई क्लास देख रहा हो
.foo--bar__baz
मुझे बताता है कि एक fooब्लॉक है जो barराज्य में है, और इसमें एक bazतत्व शामिल है ।
मैं बिल्कुल कहूंगा कि बीईएम एक शास्त्रीय मॉडल की तुलना में अधिक पुन: प्रयोज्य है।
यदि दो डेवलपर्स ब्लॉक ( fooऔर bar) बनाते हैं , और उन दोनों ब्लॉकों में हेडिंग होती है, तो वे बिना किसी टकराव के टकराव की चिंता किए अलग-अलग संदर्भों में अपने ब्लॉक का फिर से उपयोग कर सकते हैं।
ऐसा इसलिए है, क्योंकि एक शास्त्रीय संदर्भ में, .foo .headingऔर .bar .headingसंघर्ष करेगा, और एक विशिष्ट संघर्ष का परिचय देगा जिसे हल करने की आवश्यकता होगी, संभवतः मामला-दर-मामला।
एक बीईएम साइट में, कक्षाएं होंगी .foo__headingऔर .bar__heading, जो कभी संघर्ष नहीं करेंगी।
उनका दावा है "नेस्टेड सीएसएस एक विरोधी पैटर्न है।" "एंटी-पैटर्न" का क्या मतलब है, और क्यों नेस्टेड सीएसएस खराब है?
एक "एंटी-पैटर्न" एक कोडिंग पैटर्न है जो अनुभवहीन डेवलपर्स के लिए अधिक उपयुक्त विकल्प की तुलना में सीखना और उपयोग करना आसान है।
जहां तक नेस्टेड सीएसएस खराब है: नेस्टिंग एक चयनकर्ता की विशिष्टता को बढ़ाता है। विशिष्टता जितनी अधिक होती है, उतनी अधिक कोशिश उसे ओवरराइड करने में होती है। अनुभवहीन डेवलपर्स अक्सर चिंता करते हैं कि उनके सीएसएस कई पृष्ठों को प्रभावित कर सकते हैं, इसलिए वे चयनकर्ताओं का उपयोग करते हैं जैसे:
#something .lorem .ipsum .dolor ul.sit li.amet a.more
जब एक अनुभवी डेवलपर को चिंता होगी कि उनका CSS कई पृष्ठों को प्रभावित नहीं कर सकता है , तो वे चयनकर्ताओं का उपयोग करते हैं जैसे:
.more
उनका दावा है कि "हर कोई बीईएम का उपयोग करने की ओर बढ़ रहा है, इसलिए हमें भी चाहिए।" ...
यह एक बैंडवागन फेकनेस है , इसलिए इसे एक बुरे तर्क के रूप में नजरअंदाज करें। पतन के पतन के लिए जाल में मत फंसो , क्योंकि बीईएम के समर्थन में एक बुरा तर्क यह विश्वास करने का कारण नहीं है कि बीईएम अच्छा नहीं हो सकता।
क्या कोई कृपया विस्तार से बता सकता है कि BEM LESS से बेहतर क्या है?
मैंने पहले इसे कवर किया था, बीईएम और लेस तुलना करने योग्य नहीं हैं। सेब और संतरे, आदि।
मेरा सहकर्मी मुझे समझाने में पूरी तरह से विफल है, लेकिन मुझे नहीं पता कि मेरे पास कोई विकल्प है या नहीं।
मैं OOCSS, SMACSS, और BEM पर एक नज़र डालने की सलाह देता हूं, और एक टीम के रूप में प्रत्येक कार्यप्रणाली के पेशेवरों और विपक्षों का वजन करता हूं । मैं BEM का उपयोग करता हूं क्योंकि मुझे प्रारूप में इसकी सख्ती पसंद है, और बदसूरत चयनकर्ताओं को बुरा नहीं लगता, लेकिन मैं आपको यह नहीं बता सकता कि आपके लिए या आपकी टीम के लिए क्या सही है। एक व्यक्ति को शो चलाने की अनुमति न दें। यदि आप BEM के साथ सहज नहीं हैं, तो ध्यान रखें कि ऐसे अन्य विकल्प हैं जो आपकी टीम के लिए समर्थन करना आसान हो सकते हैं। आपको अपने सहकर्मी के साथ अपनी स्थिति का बचाव करने की आवश्यकता हो सकती है, लेकिन लंबे समय तक यह संभवतः आपकी परियोजनाओं के परिणाम पर सकारात्मक प्रभाव डालेगा।
मैं वास्तव में बीईएम की सराहना करने में सक्षम होना चाहता हूं, क्योंकि वह इसे गंभीरता से स्वीकार करना चाहता है।
मैंने StackOverflow पर एक उत्तर लिखा जो बताता है कि BEM कैसे काम करता है । समझने की महत्वपूर्ण बात यह है कि आपके आदर्श चयनकर्ताओं की एक विशिष्टता होनी चाहिए 0-0-1-0ताकि वे ओवरराइड और विस्तारित करने में आसान हों।
बीईएम का उपयोग करने का चयन करने का मतलब यह नहीं है कि आपको कम से कम देना होगा! आप अभी भी चर का उपयोग कर सकते हैं, आप अभी भी @imports का उपयोग कर सकते हैं, और आप निश्चित रूप से नेस्टिंग का उपयोग करना जारी रख सकते हैं। अंतर यह है कि आप चाहते हैं कि आउटपुट एक वंशज श्रृंखला के बजाय एकल वर्ग बन जाए।
तुम कहाँ हो सकता था
.widget {
.heading {
...
}
}
BEM के साथ आप उपयोग कर सकते हैं:
.widget {
&__heading {
...
}
}
इसके अतिरिक्त, क्योंकि BEM व्यक्तिगत ब्लॉकों के चारों ओर घूमता है, आप आसानी से अलग-अलग फ़ाइलों में कोड अलग कर सकते हैं। ब्लॉक के widget.lessलिए शैलियाँ होंगी .widget, जबकि ब्लॉक के component.lessलिए शैलियाँ होंगी .component। इससे किसी विशेष वर्ग के लिए स्रोत ढूंढना बहुत आसान हो जाता है, हालाँकि आप अभी भी स्रोत मानचित्रों का उपयोग करना चाहते हैं।