The Complete Beginners Guide to BEM and How To Use It In Page Builders! [Article]

Welcome back to another WordPress, web design, and Page Builder tutorial! Today, we’re going to explore BEM, which stands for Block, Element, Modifier. I’ll walk you through everything you need to know and show you how to apply it in your web design projects, especially when using page builders.

If you’ve taken any of my visual design courses, you’re already familiar with the BEM method for naming classes. But so far, we’ve only covered the basics, and I haven’t had a chance to fully explain it.

To be honest, I’ve made a few mistakes myself using BEM in some projects. But that’s okay—learning is part of the process here at Van Marciano Pro.

The good news is that page builders like Bricks Builder make it easy to correct those mistakes, whether it’s renaming classes or tweaking styles.

So, let’s jump right into this beginner’s guide to BEM. If you’re new to it, don’t worry—it’s not complicated! It’s just a matter of forming a habit and applying it correctly in your projects.

What does BEM stand for?

Just for some extra clarification –

As I mentioned, BEM stands for Block Element Modifier and is a popular CSS naming convention aimed at creating reusable, scalable, and maintainable code for your website.

Developed by the team at Yandex, BEM helps organize CSS classes and makes your HTML and CSS more readable and predictable.

So, that’s the short of it.

Here’s what we’re going to cover.

Methodology of BEM

BEM is a methodology for organizing your CSS and HTML classes by clearly defining components blocks, their sub-parts elements, and their variations modifiers.

This structure helps you avoid writing messy and unscalable CSS.

Here are the key benefits of BEM

• Consistency: A consistent naming scheme for components.
• Scalability: Easy to scale your CSS as your project grows.
• Reusability: Reuse blocks and elements across different parts of your project.
• Readability: Clearer class names make your HTML easier to understand.

Why Use BEM?

OK, so let’s look at why you should use BEM.

As your website grows, maintaining styles can become challenging. And without a proper structure, you might start overwriting styles or using too many CSS selectors (classes), and we’ve all done a bit of that at some stage, right? Which can, of course, slow down development and lead to inconsistencies.

So, BEM helps by –

1. Making it easy to identify the role of any CSS class.
2. Preventing CSS conflicts by ensuring that styles are scoped properly.
3. Promoting reusable components.

Let’s look at some examples –

Here is one way you might have written your CSS, without using BEM.

.button {...}
.red-button {...}
.large-red-button {...}

Looking at the above, you might be asking, what is wrong with this method?

Nothing, except, there is a better and more efficient way. By using the BEM approach, we can create a structure like this. See below.

.btn {...}
.btn--red {...}
.btn--large {...}

This structure makes your code more predictable.

BEM Naming Structure

Let’s dive a little deeper.

As you now know, BEM uses a specific naming convention that consists of three key parts which we mentioned earlier:

1. Block: A self-contained part that makes sense by itself.
2. Element: A part of the block that has no standalone meaning and is semantically tied to its block.
3. Modifier: A flag or tag on a block or element that changes its appearance or behavior.

Now let’s look at each one in more detail –

The ‘Block‘

A block is the main container or component. It could be a section, container, or div. It could be a button, a menu, or a form. The block name represents a high-level piece of UI.

The ‘Element’

An element is a part of a block that performs a particular function. It’s tied to its block, meaning it makes sense only within the context of its block.

To define an element, we use the double underscore __.

Here are some examples –

.header-section__div {...}
.header-menu__item {...}
.form__input {...} 
.button__icon {...}

The Modifier

Modifiers represent different states or variations of a block or element. These are added at the end using a double hyphen --.

Here are some examples –

.txt--large {...} /* A text element that is large */
.button__icon--grn {...} /* A button icon that is green */

How to Write BEM

OK, so hopefully you are finding this topic useful and have some understanding of the BEM structure. Let’s continue. Let’s dive deeper into how to implement BEM properly.

Below is a simple breakdown –

Button (btn) with states

.btn {...} /* Is the block */
.btn--large {...} /* Modifies the button to make it primary. */
.btn--red {...} /* Modifies the button to make it red. */

The HTML structure would look a little something like this –

<button class="btn btn--primary btn--large">Submit</button>

Let’s look at another example –

.menu {...} /* Is the block */
.menu__item {...} /* Is an item in the menu */
.menu__item--active {...} /* Is the modifier for the active state of the menu item */

The HTML structure would look a little something like this –

<nav class="menu">
    <a href="#" class="menu__item menu__item--active">Home</a>
    <a href="#" class="menu__item">About</a>
    <a href="#" class="menu__item">Contact</a>
</nav>

Best Practices for BEM

OK, so far so good. Now let’s try to understand some of the best practices for BEM. As I mentioned earlier, it takes a bit of time to become familiar and to develop a habit of using them.

1. Use hyphens for readability – So instead of using camelCase or underscores between words, BEM recommends using hyphens. Here is a good and bad form of this –

/* Good */
.btn__primary--large {...}

/* Bad */
.btn__primary_large {...}
.btnPrimaryLarge {...}

2. Keep your classes short and descriptive – Sometimes this can be hard to do, and I for one am not the best when it comes to naming classes. Here is an example of what I would use –

/* Good */
.hero-sec {...} /* Hero Section */
.hero-sec__ct {...} /* Hero Section with a container */
.btn--lge {...} /* Large button variant */

/* Bad */
.hero-section-container {...}
.button-small-and-medium-and-red {...}

3. Keep modifiers simple – Modifiers should reflect simple, atomic changes such as color, size, other slight variations, etc.

/* Good */
.btn--primary {...} /* Primary button */
.btn--sml {...} /* Small button */
.radius--sml {...} /* Utility class for small border radius */
.btn--red {...} /* Red button variant */

/* Bad */
.button-small-primary-with-6px-border-radius {...}

Real-World Example (Using a page builder)

OK, so hopefully you have a better understanding of BEM.

Let’s build a card component using BEM inside of Bricks Builder. The general layout will include a section, grid container. The card layout will include a title, text, and button element. Here’s what the structure panel might look like for this –

I’ve added the class names to the structure panel for reference:

This structure is scalable. You can reuse the card__btn class in other cards and only modify it by adding or removing the card__button--primary modifier.

Common pitfalls

Overcomplicating naming

Remember, try not to overcomplicate things with excessive nesting or long names for your classes. Keep it simple, clear, and concise. Here are some good and bad examples once again –

/* Good */
.btn__icon--red {...}

/* Bad */
.button__text__icon--red__left {...}

Forgetting the block

Always remember the block context. Don’t use element classes without the block. This can be an easy mistake, and one I’ve done many times myself.

/* Good */
.button__icon--sml {...}

/* Bad */
.icon--sml {...}

Wrapping up!

So there you have it! BEM is not just a CSS naming convention; it’s a methodology that helps you preserve a clean and scalable structure in your HTML and CSS. Even if you are using mostly page builder tools like Bricks and Oxygen.

By following BEM principles, you’ll make your CSS more maintainable and ensure that your design system can grow smoothly over time.

Start small with BEM, and as you get more comfortable with it, you’ll find it’s a powerful tool that scales well with your design projects.

Once again, I hope you found this tutorial useful, see you in the next one.