BEM-Block, Benennung und Verschachtelung
Ich versuche, mich mit der BEM-Namenskonvention zu beschäftigen. Ich stecke fest. Ich kann etwas falsch verstehen, mal sehen.
Ich habe eine Sidebar-Navigation und eine Content-Navigation.
Mein Sidebar Nav sieht so aus<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>
Und so sieht mein Content-Navi aus<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>
Jetzt habe ich ein Problem, wenn ich .nav__item formatiere. Sie treten in beiden Navigationsbereichen auf und sollten nicht dasselbe Format haben. Soll ich hier etwas schachteln, oder nenne ich meine Blöcke und Elemente falsch?
Verschachtelungsbeispiel in CSS:
.content__nav .nav__item { background: Red; }
Oder soll ich es so nennen:
<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>
Kannst du helfen?