BEM Explained: The Why

September 5, 2019

Here's a recap of BEM. I won't be delving too deep into the CSS of it in this post; rather, I'll focus on the mindset for helping us understand the reasoning behind it. If you'd like to watch the video to re-enforce your learning, I highly recommend it:

BEM is a component-driven approach that allows for developers to make styles in their CSS re-usable and maintainable.

The "B" in BEM stands for "Block"

Blocks are re-usable components like buttons or UI-cards that you see on websites that exist as "independent entities". Meaning that if they were added anywhere on a website, they would convey meaning and make sense to the user visiting the site.

For example, a button can exist on its own as an "independent entity" and can be added anywhere on a site. A navigation and footer component can exist as re-usable blocks that are added anywhere throughout a site.

Some blocks can be simple (buttons), while some are more complex (UI cards). The complex blocks can be made of more blocks and/or elements.

these are blocks because they are re-usable components in a website/app.

"E" is for element

Elements are like "atoms" that make up the block component.

Elements exist in the context of the block component- they can't be used on their own. They're dependent on the block component that contains it.

For example a UI card for a recipe can be thought of as a block component with the following nested elements:  

  • an image of the meal
  • a paragraph description of the meal
  • star-rating
  • author-tag

Notice how I didn't include the button as an element of the recipe. Why not? 

I would argue that the button makes for a re-usable component that can exist outside of the context of the recipe card. This button can exist in a blog post, a call-to-action, or a separate landing page. It can exist anywhere in the website and doesn't have to be tied to the recipe block.

Remember that block components exist as re-usable independent entities (aka components)
a recipe-card block with its nested elements (including the button block)

As for the rest of the items within the card (i.e. the image, heading, rating, paragraph-description, and author-tag), they all exist within the context of that recipe card. They can't exist outside of its containing block as independent, re-usable components. That makes them elements.

The recipe card (which is a re-usable block) gives meaning and context to the elements inside of it, which include the image, heading, rating, paragraph, and author-tag

Imagine seeing a star-rating anywhere else on the website. Would it make much sense to see it outside of a recipe-card? I wouldn't think so... Because it's tied to the recipe-card, the star-rating is an element of that card block.

M is for modifier

Lastly the "M" in BEM stands for modifier- which adds a cosmetic change or "modification" to the block, such as a background-color change.

this recipe-card block is modified with a pink background color

Let's review

Why use BEM? It enables us as designers and developers to think of our styles as component-driven, which means more re-usability and more flexibility as we make modifications to our components.

Want to make your button blue? No problem, it will still be the same button component, but with a blue background color.

Want to make your card smoother? Go right ahead- you can define the base-styles of your card component and modify it with a change to its border-radius.

In this next post in our BEM series, we'll see how all of the benefits of BEM come to play in CSS.

What other reasons come to your mind? Hit me up and let's start a conversation!

What did you think about what you've just read?

Wanna start a conversation?

Get at me!