What is BEM?

BEM is a front-end naming method for organizing and naming CSS classes. The Block, Element, Modifier methodology is a popular naming convention for class names in HTML and CSS. It helps to write clean CSS by following some simple rules.

Projects of any size with CSS can benefit from a BEM framework—unless writing styles directly inside already organized JavaScript files and using Styled Components or something similar. To complement BEM, include some parts of SMACSS which act as a style guide for naming conventions. BEM is easy to read and organizes styles, even when projects are extremely large.

Class naming has never been an easy part of CSS. It’s challenging for outside developers to understand what developer-specified classes do. Naming conventions can quickly get out of control when refactoring code more than once and when working with a team.

Some of the most irritating problems related to naming in CSS when:

• Overriding classes accidentally.
• Hard to read both CSS and HTML has no clear scoping and structure in naming.
• New team members waste time learning about or trying to find already created classes.
• The code is hard to update because it’s not clear what aspects are global and what belongs to the local component.
• It’s unclear how to handle nesting (i.e., what to add or keep?).

Most problems come from poor naming and lack of scope (aka the scope that closes the context). For example, when reading the code of the menu developers should feel confident that the code does not include any styles of the headings. In this article, I’ll go over what BEM is, how it works, and recommendations on how to implement BEM successfully.

How to implement BEM

There are three main parts of BEM.

Blocks

Blocks are reusable components. Like buttons, cards or form fields.

When naming your blocks, focus on describing its purpose (i.e. what it is) rather than its state (i.e. what it looks like).

For example, .btn or .nav follows the correct naming convention for a block.

.big or .bright-pink describes how it looks, so it doesn’t scale well when you want to change the design later on

 

<div class="card">
    <img src="…">
    <h2>…</h2>
    <p>…</p>
    <a>…</a>
</div>

<style>
.card {}
</style>

Elements

Inside blocks are where elements live. Elements are dependent on their parent block, and so cannot be used without them.

Elements also have a unique CSS class naming convention which works like this:

.block__element

For example, using the .card component, an element inside the card component (like an image) would have a class name like .card__img.

The element name always appends the block name, separated by a double underscore __.

<div class="card">
    <img class="card__img" src="…">
    <h2 class="card__title" >…</h2>
    <p class="card__description" >…</p>
    <a class="card__button">…</a>
</div>

<style>
.card {}
.card__img {}
.card__title {}
.card__description {}
</style>

Modifiers

When you have varying styles in blocks (or elements), that’s where modifiers come in.

For example, your ‘card’ block might have a light and dark version. Or you might have primary and secondary buttons.

Modifiers have a unique CSS naming convention which works like this:

block — modifier or block__element — modifier.

<div class="card card--dark">
    <img src="…">
    <h2 class="card__title card__title--large">…</h2>
    <p>…</p>
    <a>…</a>
</div>

<style>
.card {}
.card--dark {}
.card__title {}
.card__title--large {}
</style>

It’s considered bad practice to use a modifier class in isolation (i.e. without the block or element class).

That’s because the modifier is meant to add incremental style changes to the block.

Therefore, whenever using a modifier, ensure it’s used with the base class.

To learn more about BEM Methodology please follow below links

 

1. https://en.bem.info/methodology/
2. https://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology–cms-19403
3. https://www.smashingmagazine.com/2014/07/bem-methodology-for-small-projects/
4. https://en.bem.info/tutorials/classic/
5. https://css-tricks.com/bem-101/