BEMクラス命名規則との混同。 <code>.header</code></p> <p>どのようにこの場合には命名に対処するために、</p> <pre><code>.menu .menu__element .menu__element--current </code></pre> <p>しかし<code>.menu</code>ブロックが別のブロック内に含まれていると言うことができます：深い1段は、例えば

.menuが十分でなければならないので、メニューはそれ自体がクラスでなければなりません。それがヘッダーにのみ存在し、どこにも決してないメニューであれば、.header-menu。次に、ヘッダークラスを経由せずにメニューを直接指すことができます。

輪郭を描きたかったら、.header_menuを使ってください。

<div class="header"> 
    <ul class="menu header__menu"> 
     <li class="menu__element"></li> 
     <!-- ... --> 
    </ul> 
</div>

のでメニューが一度にも要素header__menuあるブロック：

出典

2013-03-08 12:54:49 Rob

は、ミックスイン（同じDOMノードには、いくつかのエンティティ）を使用することを検討してください。これにより、任意の抽象メニューにスタイルを適用し、ヘッダー内の特定のメニューに対して特別なルールを追加することができます。

出典

2013-10-18 09:39:02 tadatuta

<div class="header"> 
    <ul class="menu"> 
     <li class="menu__element">...</li> 
     <li class="menu__element--current">...</li> 
     ... 
    </ul> 
</div>  

.header {...} 
.menu {...} 
.menu__element {...} 
.menu__element--current {...}

が正しいでしょう。

ブロックが別のブロックに挿入されてもブロック名は変更されません。

BEMは、要素内の要素を入れて、より多くの情報、block__element__elementのようなクラス名を書き禁止：How to properly set an element's scope using BEM?

出典

2015-01-12 11:57:51

はここBEMの公式ドキュメントは（http://getbem.com/faq/#css-nested-elementsを）言っていることです。

どんなにあなたがネストしているどのように深く、あなたは常にブロック要素としてトップの親を使用しています。だから基本的にはそうです。

.header 
.header__menu 
.header__element

出典

2017-09-13 15:03:41

答えて

関連する問題