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?

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

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.