Can elements contain blocks in bem

Question

I was told that I was mistaken for writing code, as I have below. I believe that elements cannot contain blocks and their bad bem

<ul class="b-nav"> <li class="b-nav__item"> <a href="#" class="b-nav__item__link"> Item </a> </li> </ul> 

I was thinking of writing this method, but it also does not show hierarchy.

 <ul class="b-nav"> <li class="b-nav__item"> <a href="#" class="b-nav__link"> Item </a> </li> </ul> 

Here is another way, but for 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> 

Did I initially encode this incorrectly? If so, why, and what is the best alternative.

Answer 1

You must use the second or third sampling.

Or you can use this one (it uses BEM mixtures, we have a conversation in Russian). This is useful, then you need to access the link element 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 its nav_link name is more acceptable than nav_item__link, even if the link belongs to an element. Perhaps what I was doing was redundant to show this hierarchy. In the end, both belong to the same block.

I saw a few 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/

Answer 3

"Using elements within elements is not recommended by the BEM methodology." - that he, nothing more, nothing less.

Regarding the basic naming structure, Smashing Mag has an excellent tree shape showing how this should be done:

 <b:page> <b:head> <b:menu> ... </b:menu> <e:column> <b:logo/> </e:column> <e:column> <b:search> <e:input/> <e:button>Search</e:button> </b:search> </e:column> <e:column> <b:auth> ... </b:auth> <e:column> </b:head> </b:page> 

Which transforms nicely in the following JSON format:

  { block: 'page', content: { block: 'head', content: [ { block: 'menu', content: ... }, { elem: 'column', content: { block: 'logo' } }, { elem: 'column', content: [ { block: 'search', content: [ { elem: 'input' }, { elem: 'button', content: 'Search' } ] } ] }, { elem: 'column', content: { block: 'auth', content: ... } } ] } } 

Personally, I would recommend using your second version - in the third, the relationship / dependency between ul and tags does not appear in class names. Well, maybe you have already solved this in the last 2 years, but maybe someone similarly lost in the correct BEM syntax, will find this answer useful ...