CODEWITHSUNDEEP
htmlcssdombem
kingmauri
kingmauri

Reputation: 355

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

Upvotes: 3

Views: 801

Answers (4)

Ihor Zenich
Ihor Zenich

Reputation: 13485

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.

Upvotes: 1

shaune
shaune

Reputation: 1030

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,

Upvotes: 2

kingmauri
kingmauri

Reputation: 355

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>

Upvotes: 2

Dimitris Karagiannis
Dimitris Karagiannis

Reputation: 9358

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

Upvotes: 5

Related Questions