BEM. Can Elements contain Blocks?

Question

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?

If you want this naming scheem for `ul class="list"`, then the list should be a standalone component that can be used in many places without the parent wrappers. — Danyal Imran, May 09 '19 at 06:30
I think it is OK to use block inside block as long as your parent block doesn't have any say on styles inside the child block — AvcS, May 09 '19 at 06:45

score 2 · Answer 1 · answered May 09 '19 at 06:37

2

Yes, it is valid. See example from section Nested Lists in - https://html.com/lists/.

answered May 09 '19 at 06:37

random

7,756
3
19
25

2

But this is BEM methodology I'm talking about. – Yokiijay May 09 '19 at 06:42

Ishwar Patil · Accepted Answer · 2019-05-09T06:54:37.813

2

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

edited May 09 '19 at 06:54

answered May 09 '19 at 06:52

Ishwar Patil

1,671
3
11
19

1

Thanks, I think I get it. – Yokiijay May 09 '19 at 06:54

BEM. Can Elements contain Blocks?

Here is my HTML

2 Answers2