html - BEM ブロック、命名、ネスティング

Question

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>

手伝ってくれますか？