UI Development

Block Element Modifier (BEM) – Smart way of naming your CSS

What is BEM?

BEM – meaning block, element, modifier – is a front-end naming methodology and a smart way of naming your CSS classes to give them more transparency and meaning to other developers.

Naming Convention in BEM

.block{} // parent like header, container, menu, footer,
.block__element{} // a child of the block like menu item, list item, checkbox caption, header title
.block__element--modifier{} // a variation of the child like disabled, highlighted, checked

Example of using BEM with SASS:

HTML:

<div class=”block”>
    <div class=”block__element block__element--modifier”>
    </div>
</div>

SASS:

.block {
    /* CSS declarations for ‘.block’ */

    &__element {
        /* CSS declarations for ‘.block__element’ */

        &--modifier {
            /* CSS declarations for ‘.block__element--modifier’ */
        }
    }
}

Compiled CSS:

.block {
    /* CSS declarations for ‘.block’ */
}
.block__element {
    /* CSS declarations for ‘.block__element’ */
}
.block__element--modifier {
    /* CSS declarations for ‘.block__element--modifier’ */
}

Why Use BEM?

  • Using BEM approach, the compiled CSS will be more structured, modular and portable.
  • It saves lot of developing time as CSS refactoring is very less.
  • BEM eliminates nested CSS selectors. Every single HTML element has its own CSS class, and by its name you know what its purpose is. One selector to rule them all. This prevents the CSS W3C validation issues, one of the them is ‘A CSS rule should not contain more than 3 selectors in chaining’
    • Example:

                      Without BEM, the compiled CSS will look like:

.header .nav .nav-list .nav-item .nav-link {    /* 5 CSS selectors */
    /* CSS declarations for header nav link */
}

                       However, if we use BEM, the compiled CSS will look like:

.header__nav__link {    /* Only one CSS selector */
    /* CSS declarations for header nav link */
}
  • BEM approach also helps in faster page rendering by the browser. For example, without using BEM approach, the browser will have to  to look through the entire tree of CSS selectors to figure out which selector should the style be applied. On the other hand, with BEM all the browser needs to do is find all the elements in the document with that CSS class and apply styles, without checking numerous parents and parents of parents.
  • We can use Local CSS modules to automate the BEM notation by generating a unique className so that it wouldn’t clash with other’s even if they used the same name.

Some Concerns and Common Mistakes

  • Do not go too deep into nesting. The main rule should be not to use more than two levels of parent and child.
  • Be careful with where you start your block scope. A common mistake here is when a developer is using block, but he is not realising that at the later point of development that same block will have main parent block which will possibly break the rule with nesting.
  • Avoid SASS @extend.

 

 

 

About The Author

Leave a Reply

*