What is BEM and why should you use it?

If you have a problem with naming or organizing your CSS, don’t worry, you’re not the only one! One of the challenges that front-end developers face from day to day, is naming. Naming in CSS is probably the most difficult part of a UI developer or a front-end developer.

For that reason, I will introduce a well-known methodology out there BEM. Don’t worry, it’s easy to understand.

Introduction

BEM – which stands for: block, element, modifier – is an openly sourced front-end mythology, created by a team Yandex that’s based in Russia. BEM is not a framework but a way of thinking to help organize classes in CSS, giving them more transparency and meaning to other developers, making it easier to work with.

BEM is one of the most popular methodologies out there. There are a lot of variations on how people use it, however the concept is the same. It’s easy to learn and easy to use. A lot of companies start to implement it. Every day when I surf the internet, there is always a website that uses BEM (I always check every website’s code – you can learn new techniques and things that you had no idea they existed!).

It’s great to work with larger teams, and even on personal projects.

BEM gets rid of the horrifying Cascading Style Sheets(where the browser reads the CSS file from top to bottom) because each element is a component where you can put it and it won’t interfere with other styles as each component is prefixed with the name at the start – you will see.

 

Getting started with BEM

BEM is divided into 3 main units: – Block – Element – Modifier

The naming convention follows the pattern:

.block{} .block__element{} .block__element—modifier{}

 

Element is part of the block, it’s tied to it semantically and functionally, without the block, the element has absolutely no meaning.

For example, when you create navigation(block), you have items, and those items are tied up to the navigation.

A modifier represents different values to the element or block. It has a unique property. For example, if you want to modify this element to show only in large screens, then you can put a –show-large-only modifier. If you have an button, and you want it bigger, you can modify it with btn—big. Or if something is in an element, use the same thing.

However, let me give you some example on how this work in few scenarios.

We are know what a card is, well here it is in a BEM style:

<article class="card"> 
    <img class="card__img--cover" src="some/path">  
    <section class="card__body"> 
    <h1 class="card__title">BEM HTML</h1> <span class="card__topic—met">Methodology</span> <p class="card__excerpt">BEM Methodology is a great..</p> 
</section> 

</article>

This, the card above, is an excerpt of an article. It’s made up using HTML5, but utilizing BEM methodology.

Let’s decrypt the HTML code. What can we see that repeat itself? It’s ‘card’. It’s a block. This is an excerpt called card. It’s like having a house, which is called house.

Now, we have different elements in the card. The element syles will work only with the card block.

We have an element that is body, title, topic and excerpt. If we compare it to house, we can have the structure, door, window, sofa and so on.

Each element is defined by double scores, so in this case we have a card block, but we have also title, so it will be .card__title, now, what if we want to select something else? We do it by .card__date, in other worlds: .house__door, .house__window, hourse__light, .hourse__garage and so on…

What if, we want the title to be violet, maybe slightly bigger, and literate? Well, we do it with double dash. The double dash modifies the element, it can also modify the block it ‘self if needed.

Example:

.card__title—violet

In a house scenario

.house__door—red

This will tell that the title in the card, will be violet. To a more dynamic approach, we can use names such as primary-color, secondary-color, brand-color.

What if we want the house to be yellow?

.house—yellow

This is the modifier of the block straight away, we could of course, write the styles in house, however, that depends on the project and situation you’re in.

So in this example I have:

<span class=”card__topic—met”>Methodology</span>

We can see that this is from card (block), and the function of this is to show the topic, this is element “card__topic” , but we want the ‘met’ topic, to have purple color, so we modify the element with double dash , if we want it to be orange, we will simply do it like this “card__topic—orange”.

However in ths case, we want the topic to be HTML or met. So with JS we can simply change the element color by changing the modifier of it.

 

BEM Examples

I will show you few examples so you get a better idea on how to write it (if you click here you will have a ton of BEM examples). Use Code pen preferred

Navigation

<nav class="mainMenu"><ul class="mainMenu__list">     <li class="mainMenu__item--on"><a href="index.html">Home</a></li>     <li class="mainMenu__item"><a href="blog.html">Blog</a></li>     <li class="mainMenu__item"><a href="recipes.html">Recipe Index</a></li>     <li class="mainMenu__item"><a href="cooking.html">Cooking Videos</a></li>     <li class="mainMenu__item"><a href="about.html">About</a></li>     <li class="mainMenu__item"><a href="contact.html">Contact</a></li></ul></nav>

 

 

Is BEM suitable for you?

BEM is suitable for any sized project. The easy semantical mark-up sets a strong design foundation and it gives us a lot of freedom to implement it. BEM is easy to pick up for others, and it’s self-explanatory after you know the basics. However, if working on very small project, using some global styles might be a very good option, and since the project might be very small, you might not need to use BEM all the time.  On big project BEM is scalable as you can just add new components and drop them in your site, easy as that.

However, said that, using SMACSS to enhance the workflow is a good idea for some global styles, such as page headers, they might be as well be global in a single file.

 

BEM and Sass

BEM and Sass are a beautiful ccombinationt’s one of a hell beautiful way of coding and organizing your project files. If you’re not using Sass already, you should!

When using BEM, we do not have to worry about Cascading Style Sheets. That’s because everything is pre-fixed with a block, which we can call a component.

Using sass, we have a folder base, utilities, theme, pages etc… and one of the folder is Components, or in other worlds modules.

Each component, is a new file. _card.scss, _articles.scss etc..

If we go and look in the card file, we will see something like:

.card { //styles }

 

If we look in the article, we will see:

.article{ //styles }

 

Now, that says and this prefixes all of our classes with the ‘card’ or whatever the component is called.

With Sass, we can write a card like:

.card {      &__topic {}      &--html {}      &--css {} }

 

You can see the power of Sass there already.

The output of that is:

.card__topic—html{} .card__topic__css{}

 

 

As you can see, using Sass, we don’t have to repeat our self. It’s also clean an easy to understand.

Because this is a component, why not put the styles of it on the top of the component. Much easier to maintain and we get rid of the magic numbers.

What if we did it like this:

$card__topic—html

 

And we would give it a value like:

$card__topic—html: #000;

Now in our styles, we can use the Sass variable and make our component dynamic.

These are just few examples of how BEM can have super Powers with Sass.

 

Final Thoughts

I personally love BEM with Sass. It let’s me write a clean and beautiful code that everyone understands. What I love the most is the organization and the ease of adding new elements or features in the website (modules/components). I find it very easy to maintain and scale a website that uses BEM methodology. If it’s a big, or small project, I still like it. However, on some very small project, BEM might not be the best, or rather, some modifications to BEM for my needs are done.

It’s a good methodology to communicate with others. A designer, a developer, they will be able to scan throw and get the idea about the code. They will have the confidence to modify it, because they will know that if they touch anything in e.g. card, that the styles will only apply there.

.block{}.block__element{}.block__element—modifier{}

 

Where’s many times when the styles a nested, you dare to touch or modify a code, and it can affect it globally.

BEM might not be the best solution for EVERY single project, but with time you will know when to use BEM.

I can build a project(many of them on any scale) without losing my mind worrying about CSS. It’s that useful!

What are your thoughts? Comment below and share your experience!

Meet the author

Meet the author

Aurelian Spodarec

Front-end WordPress developer that blogs about web development. I like using the right tools for the job. In my spare time, I enjoy cooking healthy food and then eating it. Delicious!

Comments