7

たとえば、メニュー要素を含むメニュー ブロックがあります。

.menu
.menu__element
.menu__element--current

しかし、.menuブロックが別のブロックの中に含まれているとしましょう。.header

この場合、ネーミングをどのように処理しますか?

.header 
.header__menu 
.header__element

また

.header 
.header__menu 
.header__menu__element

また

.header 
.menu 
.menu__element
4

4 に答える 4

8

「ミックス」(同じ DOM ノード上の複数の BEM エンティティ) の使用を検討してください。

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

したがって、ブロックメニューは要素header__menuでもあります。これにより、抽象的なメニューにスタイルを適用し、ヘッダー内の特定のメニューに特別なルールを追加することができます。

于 2013-10-18T09:39:02.060 に答える
3

メニューはそれ自体がクラスである必要があるため、.menu で十分です。ヘッダーのみにあり、他の場所には決してないメニューの場合は、.header-menu. その後、ヘッダー クラスを介さずに直接メニューを指定できます。

概説した方法でそれを行うことを好む場合は、.header_menu.

于 2013-03-08T12:54:49.480 に答える
2 
<div class="header">
    <ul class="menu">
        <li class="menu__element">...</li>
        <li class="menu__element menu__element--current">...</li>
        ...
    </ul>
</div>    

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

正しいでしょう。

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

BEM では、要素内に要素を配置したり、 のようなクラス名を記述したりすることは禁止されていますblock__element__element。詳細: BEM を使用して要素のスコープを適切に設定するには?

于 2015-01-12T11:57:51.587 に答える
0

BEM の公式ドキュメントには次のように書かれています ( http://getbem.com/faq/#css-nested-elements )。

ここに画像の説明を入力

入れ子がどれだけ深くても、常に一番上の親をブロック要素として使用します。つまり、基本的には次のようになります。

.header 
.header__menu 
.header__element
于 2017-09-13T15:03:41.097 に答える