I am trying to implement a main menu (including sub menu) for a website using the BEM CSS naming convention. I have found myself nesting elements which I think is an antipattern of the convention?
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group__list">
<li class="nav__group__item">
<a class="nav__group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
It's always though to nest deep. You can not have Element of Element in the BEM methodology. So this nav__group__list is not correct, could be nav__group-list for example.
The correct BEM markup could look something like this.
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group-list">
<li class="nav__group-item">
<a class="nav__group-link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
However you can separate the "Group list", especially if it can be reused elsewhere in your project.
Your menu with separated links-group Block would look something like this:
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="links-group">
<h3 class="links-group__heading">Nav group</h3>
<ul class="links-group__list">
<li class="links-group__item">
<a class="links-group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>