Today I wanted to write a short blog to explain BEM and it’s benefits.
What is BEM?
BEM (Block Element Modifier) is a naming styleguide that helps you to create reusable components and code sharing in front-end development.
Why do I care about that?
Creating reusable code will allow you to develop future features and modify existing ones with much more ease. Furthermore if anyone has to dip into your code they will have an easier time figuring out what they are looking at and how your class names work.
So now let’s move onto the how it works.
The block is a class name that defines the standalone entity. In this example I’ll use
The element is for parts of your block that do not have any meaning on their own. So let’s say our banner has a heading inside of it. We would want to name it
<div class="banner"> <h1 class="banner__heading"></h1> </div>
These are used for flags on blocks or elements to describe behavior, states and appearances. Let’s say our banner has a full-width flag
<div class="banner banner--full-width"> <h1 class="banner__heading"></h1> </div>
If you are working in an environment where third-party applications will also be adding features or modifying existing ones you can also consider prefixing your elements with a unique tag. This will help avoid any conflicts.
<div class="mtu-banner mtu-banner--full-width"> <h1 class="mtu-banner__heading"></h1> </div>
I hope this helps explain how BEM works and I hope you can see why it will help you and your teams workflow. If you want find out more on this subject check out getbem.com