BEMブロック、ネーミング＆ネスト

質問

BEM の命名規則について理解しようとしています。私はこれで立ち往生しています。私は何かを誤解しているかもしれません、見てみましょう。

私はサイドバーナビとコンテンツナビを持っています。

私のサイドバーナビは次のようになります。

<div class="sidebar">
    <ul class="sidebar__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

そして、コンテンツナビは以下のようになります。

<div class="content">
    <ul class="content__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

今、私は.nav__itemをスタイルする場合、問題に遭遇するでしょう、それらは私の両方のナビゲーションに発生し、同じスタイルを持ってはいけません。ここでネストすべきなのか、それともブロックや要素の命名が間違っているのでしょうか？

CSSでの入れ子の例です。

.content__nav .nav__item { background: Red; }

それともこんな名前にすればいいのかな。

<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>

助けてくれますか？

どのように解決するのですか？

BEMクラスの書き方には多くのバリエーションがあり、複数の規格が競合していることに注意してください。これは、緩やかなガイドラインとして始まりました。この回答を投稿して以来 Yandexは公式規格を大幅に見直しました。 (を大幅に見直しました（かなり改善されています）。私が使用しているBEMのバージョンは、以下のものに大きく基づいています。 Nicolas Gallagherによる記事 .

このとき、私は アトミックOOBEMITLESS" これは、クラスがモジュール化され、名前空間があり、セレクタが低い特異性を持ち、状態がクラスで切り替えられ、CSS が拡大縮小できることを示すもので、CSS プリプロセッサの上に乗って、コードをより簡潔で表現豊かにしています。

以上のことから、私は以下の BEM 標準を使用することにします。

• ハイフン付きのクラス名をブロックとして使用します。
  
  foo-bar
• ブロック名の後に __ の後に要素のためのハイフンされたクラス名が続きます。
  
  foo-bar__fizz-buzz
• ブロック名や要素名の後に -- の後に、修飾子としてハイフンで繋がれたクラス名が続きます。
  
  foo-bar--baz , foo-bar--baz__fizz-buzz , foo-bar__fizz-buzz--qux

BEMの短縮形。 block-name__element-name--modifier-name

サンプルには3種類のブロックがありますね。

1. sidebar を持つ sidebar__nav 要素で構成されます。
2. content を持ち、その中に content__nav 要素で構成されます。
3. nav を持つ nav__item と nav__link 要素

を使用した sidebar と content のブロックは、同じブロックのバリエーションのように見え、次のように表すことができます。 .region.region--sidebar と .region.region--content .

は nav ブロックは、暗黙のうちに ul 要素で暗黙的に定義されているため、明示的に定義する必要があります。

<ul class="nav"><!-- could be content__nav or sidebar__nav as well if you choose -->
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>

を指定したら ul 要素が nav ブロックの中にあるのであれば、それは理にかなっています。 nav ブロックが修正されます。

<ul class="nav nav--content">
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
</ul>

CSSのクラスが設定できたら、スタイリングの 全て nav__item の要素は単純に

.nav__item {
    ...styles here...
}

で、これらのスタイルをコンテンツに上書きする nav__item の要素は

.nav--content__item {
    ...styles here...
}