Introduction to BEM methodology

Clean, plain, meaningful code that is easy to develop and manage is what developers are trying to achieve in each project. There are a lot of different ways to make it happen. I’d like to present you the BEM (block-element-modifier) methodology which is straight connected with HTML structure and CSS code. Despite the level of yours programming skills, it is always a good moment, to learn how to keep the code legible and expandable. With BEM methodology the whole process is really easy.

 

 

BEM

Block, element, modifier is a front-end methodology with it’s own way of building web interfaces. It provides a CSS class name convention which makes an app components autonomous, self-determination and reusable entities. What are this block, element and modifier though?

 

 

Block

 

Block is an independent, reusable entity. It is a “building block” of an application. It can be either simple (flat) or compound – containing other blocks. Our blocks can be for example basic sections of our site, like header, footer, sidebar, search bar, main container or any other component like tool-tip, navigation, form, custom components etc.

BEM-block-example

Element

 

It is a part of block that performs certain function. For example inside search bar we have search input and search submit button. These two elements have logic sense being inside the search block, and being interpreted as elements. Elements can also contain blocks inside them.

BEM-element-example

 

Modifier

 

You can think of a modifier as a block or element decorator. According to its definition, modifier changes block or element style attribute. We can think about it as a theme. For example if you have three almost identical buttons with different background colors you can extract two modifiers,in order to change its background-color properties and still have everything well documented and legible.

BEM-modifier-example

Examples

 

I hope that now you see the difference in naming objects in BEM convention. Now let me present you some practical example. Below you can see basic HTML structure and CSS code.

<div class="block">
  <p class="block__element block__element--modifier">Lorem ipsum ...</p>
  <p class="block__element">Lorem ipsum ...</p>
  <p class="block__element">Lorem ipsum ...</p>
</div>
<div class="block block--modifier">
  <p class="block__element block__element--modifier">Lorem ipsum ...</p>
  <p class="block__element block__element--modifier">Lorem ipsum ...</p>
  <p class="block__element">Lorem ipsum ...</p>
</div>
.block {
  ...
}
.block--modifier {
  ...
}
.block__element {
  ...
}
.block__element--modifier {
  ...
}

What is very noticeable the class names are chained and quite long. Yes, I agree with that, it’s some kind of disadvantage, but on the other hand now our classes are meaningful and we exactly know what they are for. Using BEM with SASS make it even easier to code:

.block {
  ...
  &--modifier {
    ...
  }
  &__element {
    ...
    &--modifier {
      ...
    }
  }
}

Summary

 

Using BEM methodology allow us to build an independent components, that are reusable. We can have one component structure and reuse it anywhere in app. We can also adjust it by modifiers.

In my opinion BEM methodology is surely dedicated to component focused projects. Being easy to implement it doesn’t matter whether your project is big or small.

From my perspective, this methodology is very useful. It allows me to write clean, legible code and also make it more efficient and keep it simple.

 

You may be interested in Hybrid mobile applications and Print Style Sheets for Ionic Framework too?

SIMILAR ARTICLES

Tomasz Krajewski on sabemail
Tomasz Krajewski
Front-end developer at PrimeModule
I am interested in modern technologies, strongly focused on JavaScript. I find keeping the code clean and legible really important. Best thing I love in my job is that each project is unique, which makes my work truly fascinating.

2 thoughts on “Introduction to BEM methodology

Leave a Reply

Your email address will not be published. Required fields are marked *