BEMを使用して要素の有効範囲を正しく設定する方法は？</p> <pre><code>collection-main__features-top__story__byline__author </code></pre> <p>要素はブロックの一部であり、それが属するブロックの外側では意味がありませんBEMの命名規則に従って、あるもの：5つのネストされたレベルが存在し、次のBEMツリー構造、与えられた

Question

authorクラスの正しい名前は？

authorは、意味的にbylineとstoryコンテキストに結びついたが、features-topとcollection-mainブロックの下の無意味されているので、最高のBEM名は何ですか？

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ブロックが追加される場合は何が起こると、私たちは、リストの2番目のauthor要素のスタイルをしたいですか？

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

BEMは、CSSの要素に要素を入れることを禁じます！
BEMのマークアップで最も一般的なエラー - block__element__elementを作成します。 DOMツリーをコピーするのではなく、新しいブロックを作成する必要があります。例えば

：
右HTML：

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

右CSS：あなたは要素の要素を作成する必要がある場合は

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

、そして、あなたは新しいブロックを作るために必要か1つのネストされた要素でbem-treeを作成してください！

WRONG：

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

RIGHT＃1：

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

RIGHT＃2新しいブロックを作成します。単一のネストされた要素

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

であなたのBEM-ツリーを作ります注意してください - 要素をCSSの要素に入れることはできませんが、 n要素内の要素をhtmlに入れる必要があります。 DOMツリーとBEMツリーは異なる場合があります。

ブロックの名前で要素名を入れて、奇妙な名前を書かないでください！

WRONG：

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

あなたがブロックを移動しようとすると、奇妙な名前の問題を取得しているので：

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

ネストされたHTML要素をDOMツリーです。
書き込むクラスの名前はBEMツリーです。
違いを感じてください！

DOMツリー：

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

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

BEM-ツリー：

<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、BEM-方法論の著者：https://twitter.com/harisov/status/403421669974618112

クラス名「block__elem__elem___elem」などは、コーダはBEMで何かを理解していなかったことを意味します。

も読む：

• 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/