बीईएम का उपयोग कर तत्व के दायरे को सही ढंग से कैसे सेट करें?

Question

निम्नलिखित कार्यलय वृक्ष संरचना, जहां पांच नेस्टेड स्तरों मौजूद देखते हुए:

collection-main__features-top__story__byline__author 

कार्यलय के नामकरण परंपरा है, जहां एक तत्व एक ब्लॉक का हिस्सा है और इसे करने के लिए ब्लॉक, क्या है अंतर्गत आता है के बाहर कोई अर्थ नहीं है के अनुसार author कक्षा का नाम देने का सही तरीका?

एक author के बाद से शब्दार्थ features-top और collection-main ब्लॉक के तहत byline और story संदर्भ से बंधा है, लेकिन व्यर्थ है, सबसे अच्छा कार्यलय नाम क्या है?

collection-main__author 
features-top__author 
story__author (best?) 
story__byline__author 
byline__author 

क्या होता है यदि कोई नया features ब्लॉक पेश किया जाता है?

collection-main__features-top__story__byline__author (target) 
collection-main__features-bottom__story__byline__author 

features-top__story__author 
story--features-top__author (best?) 

अंत में, यदि एक और collection ब्लॉक जोड़ा जाता है क्या होता है और हम सूची में दूसरे लेखक तत्व शैली करना चाहते हैं?

collection-main__features-top__story__byline__author 
collection-main__features-bottom__story__byline__author (target) 
collection-sub__features-top__story__byline__author 
collection-sub__features-bottom__story__byline__author 

क्या हम ऐसा कुछ करेंगे?

story--collection-main--features-bottom__author 

एक बेहतर विकल्प होना चाहिए।

Answer 1

बीईएम प्रतिबंधित तत्वों में सीएसएस में तत्वों को डालता है!
आप बीईएम मार्कअप में सबसे आम त्रुटि बनाते हैं - block__element__element लिखना। आपको डोम-पेड़ की प्रतिलिपि बनाने के बजाय नए ब्लॉक बनाना होगा।

उदाहरण के लिए:
सही HTML:

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
    <div class='block__elem3'></div> 
</div> 

सही सीएसएस:

.block {} 
.block__elem1 {} 
.block__elem2 {} 
.block__elem3 {} 

आप एक तत्व का एक तत्व बनाने की जरूरत है, तो आप एक नए ब्लॉक बनाने की जरूरत है या एक ही घोंसले तत्वों के साथ अपने बीम-पेड़ बनाओ!

गलत:

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem1__elem2'></div> 
    </div> 
</div> 

अधिकार # 1: सुनिश्चित एक नए ब्लॉक

<div class='block1'> 
    <div class='block2'> 
     <div class='block2__elem'></div> 
    </div> 
</div> 

अधिकार # 2: एक ही नेस्टेड तत्वों के साथ अपने कार्यलय-वृक्ष बनाने

<div class='block'> 
    <div class='block__elem1'> 
     <div class='block__elem2'></div> 
    </div> 
</div> 

ध्यान दें - आप तत्वों को सीएसएस में तत्वों में नहीं डाल सकते हैं, लेकिन आप ca एन और तत्वों को एचटीएमएल में तत्वों में रखना चाहिए! डोम-पेड़ और बीईएम-पेड़ अलग हो सकते हैं।

अजीब नाम न लिखें, तत्व का नाम ब्लॉक के नाम पर डालें!

गलत:

.block {} 
.block-elem1 {} 
.block-elem1__elem2 {} 

क्योंकि आप अजीब नामों के साथ एक समस्या है जब आप ब्लॉक को स्थानांतरित करने की कोशिश मिलती है:

<div class='other-block'> 
    <div class='block-elem1'></div> 
</div> 

नेस्टेड एचटीएमएल-तत्व एक डोम-वृक्ष है।
आपके द्वारा लिखे गए वर्गों के नाम एक बीईएम-पेड़ है।
अंतर महसूस करें!

डोम पेड़:

<ul> 
    <li> 
    <a> 
     <span></span> 
    </a> 
    </li> 
</ul> 

.ul {} 
.ul > li {} 
.ul > li > a {} 
.ul > li > a > span {} 

कार्यलय पेड़:

<ul class="menu"> 
    <li class="menu__item"> 
    <a class="menu__link"> 
     <span class="menu__text"></span> 
    </a> 
    </li> 
</ul> 

.menu {} 
.menu__item {} 
.menu__link {} 
.menu__text {} 

संदर्भ:

"एक तत्व एक ब्लॉक के एक घटक बात यह है कि नहीं किया जा सकता है इसके बाहर। " https://en.bem.info/methodology/key-concepts/#element

एक तत्व ब्लॉक का हिस्सा है! तत्व का हिस्सा नहीं है! पढ़ें विटाली Harisov, कार्यलय-पद्धति के लेखक: https://twitter.com/harisov/status/403421669974618112

className की तरह "block__elem__elem___elem" इसका मतलब है कि सांकेतिक शब्दों में बदलनेवाला कार्यलय में कुछ भी समझ में नहीं आया।

भी पढ़ें: फ्रंट-एंड डेवलपर्स दिवस इस विषय के बारे में:

• https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2
• http://getbem.com/faq/#css-nested-elements

एक रिपोर्ट (रूसी में) एक वेब सम्मेलन WebCamp पर नहीं है https://www.youtube.com/watch?v=kBgHdSOj33A + स्लाइड: http://ihorzenich.github.io/talks/2015/frontendweekend-bem/