BEM Methology: Elements outside Block

Question

Wonder if that is correct the BEM way. Let's say I have a component/block "box".

<div class="box">
    <div class="box__title">Box Title</div>
</div>

This box can be used everywhere. But then for example this box can also be used in a list ex.

<ul>
    <li>
        <div class="box">
            <div class="box__title">Box Title</div>
        </div>
    </li>
</ul>

It is correct to call the DOM-Classes like that?

<ul class="box__list">
    <li class="box__item">
        <div class="box">
            <div class="box__title">Box Title</div>
        </div>
    </li>
</ul>

So "box__list" and "box__item" is somehow outside of the block "box". "box__item" then have some specific stuff.

.box__item {
    margin-bottom: 20px;
 }

It is "allowed" to do it this way or do I need here completly something different like "box-wrapper__list" and "box-wrapper__item".

Thanks for commenting. :)

Answer 1

Since the elements are outside of the .box then no, it does not make sense to give them these classes.

You have to think what your base components/blocks (think 'building blocks') are.

A component/block is something you can (ideally) place anywhere inside your layout and still have it look/behave the same way, regardles of parent or adjacent elements. The BEM naming convention tries to enforce CSS "modularity" in this sense.

To me it looks like you definitely have a .box component. If you think the list should be another component/block, then name it something else, as you would name a block and not an element.

References:

BEM key concepts

BEM naming conventions