Search code examples
htmlcssbem

BEM. Can Elements contain Blocks?

Here is my HTML

<ul class="menu">
  <li class="menu__item">
    <a href="" class="menu__link"></a>
  </li>
  <li class="menu__item">
    <ul class="list"> // can I place this block inside here?
      <li class="list__item">
        ...
      </li>
      <li class="list__item">
        ...
      </li>
    </ul>
  </li>
</ul>

In this case, I place the block list inside the element menu__item.

I wonder, is this legal?

Solution

  • As per this documentation from BEM, we can nest the blocks. I.e. a block can have another block in it. The only condition is that the children blocks should be independent on the parent.

    https://en.bem.info/methodology/block-modification/#placing-a-block-inside-another-block