Menu
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?
319
The naming convention best approach would be to use a wrapper specific to the blocks, like features-wrapper. For example, here’s how the HTML could look for the Notion features section: So the key to naming wrapper and container classes within the BEM mental model is considering the context:
A BEM class name includes up to three parts. Block: The outermost parent element of the component is defined as the block. Element: Inside of the component may be one or more children called elements. Modifier: Either a block or element may have a variation signified by a modifier. If all three are used in a name it would look something like this:
The straight BEM way to add a modifier is to create a modifier class name by adding two hyphens “--” after the Block name. Using BEM with Webflow, we create modifier class names by adding an “.is” combo class. For example:.c-nav.is--white {}.c-nav.is--transparent {}The above example shows how to modify a block.
BEM (which stands for Block-Element-Modifier) is a naming convention standard for CSS class names. It has fairly wide adoption and is immensely useful in writing CSS that is easier to read, understand, and scale. We’re Hiring Frontend Developers!
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
52
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.
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
