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. :)

If you find yourself in such a situation, I'd say you're not "seeing" the component correctly. You might be mistaken the component, the `.box` in your case, with the actual content. — Andrei V, Oct 25 '16 at 13:17

score 5 · Accepted Answer · answered Oct 25 '16 at 13:17

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

score 2 · Answer 2 · answered Oct 25 '16 at 14:15

2

so this makes now more sense - thanks!

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

answered Oct 25 '16 at 14:15

kingmauri

345
1
3
9

score 2 · Answer 3 · answered Nov 09 '16 at 07:19

I completely understand the thought process behind your question and it is something I have attempted to resolve.

The solution I came up with is stopping using the __wrap naming convention and changing to __inner or content. Essentially a word that best describes the inside, rather than outside as wrap did.

From there we can create an example like so.

This does mean that you will have to change the way you apply classes slightly, but i did find that it helps encapsulate the entire block, rather than having to deal with the ambiguity haing box__wrap on the outside creates.

<div class='box'>
  <div class='box__inner'> 
    <div class='box__head'>head</div> 
    <div class='box__main'>main</div>
    <div class='box__foot'>foot</div>    
  </div>
</div>

Hopefully my answer helps you in some way,

Ihor Zenich · Answer 4 · 2018-12-18T10:37:36.047

1

Yes, #b_ element can be placed outside his block in DOM. Also different blocks & elements can intersections in DOM-tree: https://en.bem.info/forum/43/ (proof from authors of BEM-methodology).

But in your current case you shouldn't use that for positioning, your version with wrappers is correct.

edited Dec 18 '18 at 10:37

answered Nov 01 '16 at 10:28

Ihor Zenich

10,727
3
22
18

BEM Methology: Elements outside Block

4 Answers4