Naming A Wrapper Element Class When Using BEM

Question

I understand that when using BEM, the classnames should not directly reflect the HTML structure, but how should a wrapper element be named? Please ignore my particular syntax(close to SUIT); it still follows BEM, just with a different way of differentiating the elements.

For example:

<div class="?">
  <footer class="PageFooter">
    <h4 class="PageFooter-brand>…</h4>
    <ul class="PageFooter-contactDetails">…</ul>
  </footer>
<div>

I would currently class the wrapper in this instance as PageFooterWrapper, but this feels clunky because the wrapper is not independent - it exists purely for the PageFooter. Obviously prefixing everything with PageFooter- is ridiculous, so that only leaves treating the wrapper as a part of PageFooter: PageFooter-wrapper. This irks me as there is an implied suggested applied by this.

So what should the class of the wrapper be?

Why is there a need for a wrapper around
at all since
represents a container, or wrapper, by itself? — Rob, Jul 06 '15 at 12:20
@Rob Don't be so pedantic. This is an example made for the question. — Undistraction, Jul 06 '15 at 12:23
Not being pedantic at all. It's a technical observation by someone obviously more experienced than you. What purpose does it serve? — Rob, Jul 06 '15 at 12:26
@Rob Next time I act like a chump I'll remember to refer to it as a 'technical observation'. — Undistraction, Jul 06 '15 at 12:35
Your reasoning is incorrect as if your example represents something typical. It is not, and I tried to point that out, but I'll leave you with it. — Rob, Jul 06 '15 at 12:44

score 22 · Accepted Answer · answered Jul 06 '15 at 12:09

22

The way i've always treated it is the wrapper should always be the block so:

<div class="PageFooter">
  <footer class="PageFooter-inner">
    <h4 class="PageFooter-brand">...</h4>
    <ul class="PageFooter-contactDetails">...</ul>
  </footer>
</div>

The Block contains Elements so instead of having something around my Block i just followed along with the Element principle and started using inner's instead of containers

answered Jul 06 '15 at 12:09

Dan Gamble

3,965
1
24
44

2

Thanks. That makes some sense, though I don't think I like the fact that the wrapper is now the top-level element in terms of classes. A wrapper is the perfect example of something that could easily become unneeded / needed as a layout changes, so coupling it to the footer like this feels wrong to me. By treating it as a sub-element it can easily be removed without effecting anything else. In short, you've made the footer much less self-contained and less portable. – Undistraction Jul 06 '15 at 12:17
2

If that's the case then you could argue that the wrapper isn't specific to the `PageFooter` it's specific to the content around it as it's based on the layout of things around it. So it could make sense to decouple them and have the wrapper tied to the layout of the site as opposed to the `PageFooter`? – Dan Gamble Jul 06 '15 at 12:20
1

Yes. That is exactly what I'm coming round to. It should be a child element of the container rather than part of the footer. I often treat an element as a layout container with slots for sub-elements, so I think this is really just a variation of that. – Undistraction Jul 06 '15 at 12:27
1

For things like containers, rows, columns which seem to come with Foundation/Bootstrap i tend to leave them as their own entities and they are normally very generic so i don't need to have a `PageFooter` specific container. If you've played around with React at all the way they build their components seems quite close to how i tend to treat BEM based CSS – Dan Gamble Jul 06 '15 at 12:32
Just started playing with React and you're right. The two complement each other well. – Undistraction Jul 06 '15 at 12:36

score 8 · Answer 2 · edited Jul 16 '15 at 23:58

I've actually used two classes successfully, my pattern is as follows:

<div class='page-section bem-block'>
    <div class='bem-block__element'>
        <!-- etc etc -->
    </div>
</div>

Effectively using a utility class to perform certain wrapper functions. The css would likely be similar to this:

.page-section {
    width: 100%;
}
@media screen and (min-width: 1200px) {
    margin: 0 auto;
    width: 1200px;
}

I've found this works well in practice. It would also be possible for .bem-block and it's contemporaries to inherit from .page-section.

This solution complements Dan Gamble's.

Naming A Wrapper Element Class When Using BEM

2 Answers2