BEM – Block Element Modifier

BEM: écran d'ordinateur montrant des lignes de code

Have you already spend hours rewriting your HTML and CSS code ? Then this article might be what you are looking for. Discover how BEM, aka Block Element Modifier, can help you improve your code.

While reflecting upon a team web project as part of my translation and multilingual webdesign Master degree, I have wondered how we could have handled the code differently. How tu further improve cooperation among developers with various background on a joint project in the future ?

New project: fresh resolution.

BEM - Block Element Modifier. PC screens displaying the source code of a website.

Introduction to BEM: Block Element Modifier

BEM is a powerful tool developed by Yandex allowing to set a clear structure and is easy to implement.

It is a methodology that enables front-end developers to organize and clarify their code by unifying CSS classes naming.

Block Element Modifier in a nutshell:

  • substantial time saving
  • simplified web page layout
  • makes the code easier to maintain

Uncover how your web integrator life is about to change thanks to BEM !

What are the main benefits of using Block Element Modifier ?

A methodology to improve your code structure

This methodology was designed to facilitate web developers team work and enhance code uniformity.

Following a naming convention for CSS classes will help you produce a clear code. You will then spend less time deciphering your fellow workers work or reminding what you did previously.

Imagine you can choose betwenn two projects: Project A CSS files are very large and classes names don’t give a clue about HTML elements targeted. Project B code is rather concise and understandable at first glance. Which project will you find more appealing ?

Implementing a consistent terminology for your classes naming will help you write a consistent and streamlined code. By reading classes name you will then be able to quickly identify the element you need to modify while optimizing the time spent updating your code.

Following Block Element Modifier methodology can also be very valuable for the end user:

  • a clearly structured website
  • less code
  • smaller CSS files
  • optimized time needed to load web pages

A reusable code

Another advantage offered to developers by Block Element Modifier is code modularity. BEM structure allows the creation of reusable components so that that they can be reused from a project to another. In other words building reusable independents blocs will enable you to produce a scalable code that is easy to maintain.

Block Element Modifier can thus turn out to be a valuable tool for web integrators. All you need to apply this methodology is some consistency when starting your project. Once you have set this habit, you will benefit from a valubale code of practice and a logic that you can reapply to other web projects.

Applying BEM methodology means to think about webpage layout as blocks, elements and modifiers while building the HTML structure.

How does Block Element Modifier work ?

With Block Element Modifier website styling is cut into blocks, elements and modifiers.

A block is an independent item which may contain several elements and is understandable on its own. For instance: the header, the footer or a button.

An element is a block component. It has no meaning outside its block (its parent). For instance: a list or menu item.

A modifier refers to any change in the appearance or behavior of a block or element. For instance: a button size, highlighting, or background color applied to an item.

This diagram will help you visualize BEM key concepts:

Diagram presenting BEM key concepts.

What BEM syntax looks like ?

Basic rules

BEM sets class naming rules for each type:

  • Block: apply a class to a block making sure that the name clearly identifies the type of block. For instance: class=”nav”, class=”form”, class=”button”.
  • Element: each element is named after the block to which it belongs, followed by two underscores and a name identifying the element. For instance: class=”nav__menu” or class=”nav__item”.
  • Modifier: to modify a block or an element, keep its original class and add the name of the block or element followed by two dashes and then the name of the modified property. For instance: class=”nav__item nav__item–color-white”.
Extract of HTML code featuring an example of how to use BEM syntax for the navigation menu of a website.

Why add a class to modify a block or an element ?

It is important to add a specific class modifying the block or base element in order to:

  • maintain the visual consistency of your layout,
  • avoid code duplication
  • split block or element role from modifier role.

Moreover complying with this rule ensures that the element’s styling is properly considered by:

  • increasing specificity: the modified element will have two classes in the above example.
  • writing the modifier after the block or element. This way your CSS redefines the properties of the block or element.

For instance: if you would like to create two buttons with the same dimensions for the “Login” and “Register” features, a white button and a button with a white border, here is what you could write:

Extract of HTML code with a focus on the use of BEM (Block Element Modifier) syntax.

BEM aims at limiting the specificity

For grandchildren: be sure to name your classes with BEM without making the parent element classes too long. Choose specific names for each item. For instance: nav__menu, nav__item, nav__link, nav__icon

Keep in mind the purpose of Block Element Modifier: optimizing the code and facilitating its maintenance by ensuring readability and modularity.

For more details on class naming rules I recommend you to check the official documentation.

In short, what advantages can you expect from BEM?

Using a naming convention will greatly facilitate collaboration and make code produced by several people in team projects easier to read.It is also a good practice when working on your personal projects to facilitate the evolution of your code in the long term and save time when you go back to a project you have not worked on for months.

If you are a beginner, do not think you need to develop your HTML and CSS skills before embracing Block Element Modifier! Whatever your background and experience in web development, following a methodology will allow you to structure your web projects before plunging into the code, especially if you are just starting out. If each developer adopts these good practices as soon as the opportunity arises, we will make the code more readable for everyone!

Sources

Leave a Reply

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