Я пытаюсь обернуть голову вокруг соглашения об именах БЭМ. Я застрял в этом. Я могу что-то неправильно понять, давайте посмотрим.

У меня есть навигация по боковой панели и навигация по контенту.

Моя боковая панель навигации выглядит следующим образом

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

И мой контент Nav выглядит так

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

Вы можете помочь?