Estoy tratando de entender la convención de nombres BEM. Estoy atrapado en esto. Puedo entender mal algo, veamos.

Tengo una barra lateral de navegación y una navegación de contenido.

Mi barra lateral de navegación se ve así

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

Y mi contenido de navegación se ve así

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

Ahora tendré un problema si estilo .nav__item, se producen en mis dos navegaciones y no deberían tener el mismo estilo. ¿Debo anidar aquí o estoy nombrando mal mis bloques y elementos?

Ejemplo de anidamiento en CSS:

.content__nav .nav__item { background: Red; }

O debería nombrarlo así:

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

¿Puede usted ayudar?