kingmauri kingmauri - 1 month ago 11
CSS Question

BEM Methology: Elements outside Block

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

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