Let’s say you’ve been working on a website, and suddenly your styles are all over the place. Your buttons look different on every page. Your headers aren’t lining up. And you’ve got 37 classes named something like blue-box-new-final-FIXED.
Sound familiar?
That’s where BEM comes in. It’s a simple way to name your CSS classes so you always know what each one does—and you don’t have to fight with your own code later.
BEM stands for:
- Block
- Element
- Modifier
It may sound technical, but don’t worry—we’re about to break it down.
Why BEM Makes CSS Easier
Here’s the big idea: Instead of making up random class names every time you style something, BEM gives you a pattern to follow.
And that pattern helps you:
- Keep your styles consistent
- Avoid accidentally breaking something else on your site
- Understand your code even months later
- Make changes faster, without frustration
It’s basically a simple system to keep your website styles organized.
What Do Block, Element, and Modifier Mean?
Let’s look at an example. Imagine you’re designing a card on your website:
<div class=”card card–highlighted”>
<h2 class=”card__title”>Simple CSS with BEM</h2>
<p class=”card__description”>Here’s how it works…</p>
</div>
Here’s how it breaks down:
- card is the Block — it’s the main component
- card__title and card__description are Elements — parts that belong to the block
- card–highlighted is a Modifier — a version of the card with a different look (like a special color or border)
So instead of vague class names like box or text1, you can instantly tell what each part does.
A Real-Life Example: Styling a Button
Let’s compare a button with and without using BEM:
Without BEM:
<button class=”blue-btn big-text left-align”>Click Me</button>
It works, but it’s kind of messy. What happens when you need to change the color, or reuse that style elsewhere?
With BEM:
<button class=”button button–blue button–large”>Click Me</button>
Now, it’s super clear:
- button is the base style
- button–blue is a blue version
- button–large is a larger version
How to Write BEM CSS
Here’s the basic pattern:
- Block = The main thing (like menu, form, or card)
- Element = A part of that thing, written like block__element
- Modifier = A version or variation, written like block–modifier
So a BEM-style class name might look like:
- form (block)
- form__label (element)
- form–dark (modifier)
That’s it. No confusing nesting, just a clear, reusable naming system.
When Should You Use BEM?
BEM works great when:
- You’re building a website with reusable components (like cards, buttons, or forms)
- You want to keep your CSS simple and clear
- You’re working with other people, and want everyone to follow the same style
- You’re tired of getting lost in your own code
Even if you’re building a small personal project, BEM makes your life easier, especially when you come back to it later.
Does BEM Work with Other Tools?
Totally. You can use BEM with:
- Regular CSS
- SCSS or Sass (if you’re using nesting)
- Page builders or templating systems
- Even alongside utility frameworks like Tailwind (just mix carefully)
BEM is flexible—it’s a naming convention, not a rulebook. That means it works with whatever setup you already have.
BEM Means Less Stress, More Clarity
If CSS has ever made you want to flip your desk, BEM might be your new best friend.
It’s not complicated. It’s just a way to write class names that make sense—and keep making sense, even when your project gets big.
So the next time you’re tempted to name something .thingy-blue-box-final-final2, try BEM instead.
Your future self (and your dev team) will thank you.
Need help cleaning up your CSS or organizing your site styles?
At Nerd Rush, we help brands build fast, scalable front ends—with code that makes sense. Let’s simplify your CSS together.
