My Practical Overview of BEM CSS for WordPress and Visual Builders

My Practical Overview of BEM CSS for WordPress and Visual Builders

As a web designer, I remember learning CSS and feeling like it was something anyone could master quickly. You change a property, you see the result instantly—it’s satisfying and straightforward. But maintaining and scaling CSS is another story. As my projects grew, I realized that keeping things organized could easily turn into a headache. If you’ve ever had to maintain a large codebase, you know what I mean.

One methodology that genuinely helped me is BEM — Block Element Modifier. It was originally developed by Yandex, a Russian search engine, and it’s become one of my go-to strategies for structuring CSS, especially for WordPress projects (including those built visually with tools like Bricks and Oxygen).

What is BEM CSS?

BEM stands for Block, Element, and Modifier. Here’s how I break it down personally:

• Block: Think of this as the main component, the “parent,” such as a card, a form, or a navigation list.
• Element: These are the “children” or pieces that make up the block, like an item in a list or a button in a card.
• Modifier: This represents states or variations, like “active,” “disabled,” or “highlighted.”

Example: List Items with an Active State

Suppose I want a list of navigation items and one should appear “active.” Here’s the traditional approach:

<ul class="list">
  <li class="list-item">One</li>
  <li class="list-item active">Two</li>
  <li class="list-item">Three</li>
</ul>

css.list {}
.list-item {}
.list-item.active {}

With BEM, it becomes clearer and more scalable:

<ul class="list">
  <li class="list__item">One</li>
  <li class="list__item list__item--active">Two</li>
  <li class="list__item">Three</li>
</ul>

css.list {}
.list__item {}
.list__item--active {}

Notice the “__” for elements and “–” for modifiers. Honestly, when I first saw BEM, it looked odd! But as I used it more, I found it extremely helpful. You can quickly scan your markup or styles and instantly see what does what. That’s priceless for workflow, especially when collaborating or coming back to a project months later.

Okay, so why should we use BEM

• Clarity: With BEM, I know what every class is for at a glance.
• Component Reuse: It’s easier to copy blocks and reuse them in other contexts — absolutely vital in WordPress, especially with visual builders like Bricks and Oxygen.
• Easier Maintenance: When clients need updates, it’s faster to modify or add new styles—BEM helps you avoid accidental style overrides.

BEM in WordPress + Visual Builders

I use BEM conventions even when working in visual builders. In Bricks Builder, for example, you can name your CSS classes using BEM and structure your layouts with repeatable “blocks” (like cards, sections, grids).
Modifiers can represent alternate color schemes, hover states, or adjusted layouts. This way, your custom CSS stays tidy—even as you move blocks and elements around visually.

ACF (Advanced Custom Fields) and tools like Gutenberg let you build highly modular pages, and BEM makes these modules easy to style and scale.
If you use Oxygen or Gutentor, the principle stays the same: name your classes with BEM, and your CSS is future-proofed.

It’s just the right way to do CSS

Every CSS methodology has its trade-offs. For me, BEM has led to less confusion, better scalability, and smoother collaboration—especially on WordPress sites with complex visual editing needs.
If you haven’t tried it yet, give it a go—I bet you’ll appreciate how much easier it is to keep your styles organized!