Can Elements contain Blocks in bem

Question

I have been told I was wrong for writing the code like I have below. I suppose elements can not contain blocks and its bad b.e.m.

<ul class="b-nav">

    <li class="b-nav__item">

         <a href="#" class="b-nav__item__link"> Item </a>


     </li>

 </ul>

I thought about writing it this way but it doesn't show the hierarchy as well.

<ul class="b-nav">

    <li class="b-nav__item">

         <a href="#" class="b-nav__link"> Item </a>


     </li>

 </ul>

Here is another way but to me it seems worse than the example above.

<ul class="b-nav">

    <li class="b-nav__item">

         <a href="#" class="b-link"> Item </a>


     </li>

 </ul>

Is the way I originally coded it wrong? If so why, and what is the best alternative.

Answer 1

You should use second or third samples.

Or you could use this one (it uses BEM mixes; we have a talk on this in Russian). It is helpful then you need to access link elem of b-nav from javascript code.

<ul class="b-nav">

    <li class="b-nav__item">

         <a href="#" class="b-nav__link b-link"> Item </a>

     </li>

 </ul>

Answer 2

I think naming it nav_link is more accepted than nav_item__link, even if a link belongs to an item. Maybe what I was doing was overkill to show that hierarchy. In the end, both belong to the same block.

I saw some examples in the comments of each link below

https://github.com/csswizardry/inuit.css/issues/155

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/