To BEM or not to BEM? That is the question.

Introduction

We recently incorporated BEM into all our frontend (HTML, CSS, SCSS) web development and have had mixed feelings about its advantages and disadvantages ever since. We have also been busy researching BEM best practices and its support in CSS pre-processors, such as LESS & SASS.

In this article we take a quick look at what BEM is, why you should care about it, and the pros & cons of using BEM.

 

What is BEM?

BEM  stands for Block Element Modifier and is an HTML & CSS naming methodology that helps you create reusable components and aids code sharing in frontend development. 

BEM encourages you to take a modular approach to constructing HTML/CSS, such that every HTML component (or "module") you code consists of a block, element(s), and modifier(s). Take a look at http://getBEM.com for a detailed guideline and sample code.

 

Why should you care about BEM?

You should care because BEM fixes the two biggest problems with plain old CSS:

  1. Inheritance
  2. Specificity

 

CSS Inheritance

Inheritance in CSS is infinite. Unlike other programming languages, there is no function scope or closure. Styles that you define at the top of the file will flow down (cascade) and will never reach a bottom. BEM avoids CSS inheritance and provides some sort of scope by using unique CSS classes per element.

 

CSS Specificity

And why is CSS specificity bad? Simply because you need to become more specific to win over existing specificity. And more often than not, developers find themselves using very long nested CSS selectors or the '!important' keyword. Either of those two approaches results in a complicated mess of overlapping and conflicting CSS rules.

BEM reduces style conflicts by keeping CSS specificity to a minimum.

 

BEMs pros and cons 

 

Pros

In addition to fixing CSS inheritance and specificity issues, incorporating BEM into your projects also brings in the following benefits:

  1. Better HTML/CSS decoupling
    • By avoiding use of HTML element names in CSS selectors, BEM makes CSS code readily portable to a different HTML structure.
  2. Better CSS performance
    • Browsers evaluate CSS selectors right to left and BEM encourages frontend developers to create a flat CSS structure with no nested selectors. So the less browsers have to evaluate, the faster they can render.
  3. No CSS conflicts
    • BEM avoids CSS conflicts by using unique contextual class names for every block, element and modifier combination.
  4. Ease of code maintenance
    • BEM's modular approach encourages developing independent modules of code and hence easier to maintain & update without affecting other modules in the project.

Cons

As with everything, BEM also comes with a few downsides but these can easily be mitigated by implementing a few extra steps while configuring your frontend build process.

  1. File size bloating
    • It is known that BEM can bloat file sizes with the longer CSS class names, but this can easily be overcome by minifying and gzipping production code.
  2. Ugly HTML code
    • While the overall HTML code does 'look' ugly with BEM class names, the visitor of the website or application will not look in the source too often, so it is not really an issue.

 

Conclusion

From our brief experience with BEM so far, the pros do seem to outweigh the cons. So we would recommend trying BEM for your next project, if you haven't already. And until we dive deeper, it does seem more sensible to BEM than not!


Amit 26 Jul 2017