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?

Cent

Why is there a need for a wrapper around <footer> at all since <footer> represents a container, or wrapper, by itself? – Purloin

@Purloin Don't be so pedantic. This is an example made for the question. – Cent

Not being pedantic at all. It's a technical observation by someone obviously more experienced than you. What purpose does it serve? – Purloin

@Purloin Next time I act like a chump I'll remember to refer to it as a 'technical observation'. – Cent

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. – Purloin

Answer 1

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

Bram

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. – Cent

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? – Bram

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. – Cent

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 – Bram

Just started playing with React and you're right. The two complement each other well. – Cent

Answer 2

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.

Watchman