BEM and Why We Should Be Using It

What even is BEM?

It is a naming convention for CSS and HTML classes, (Block-Element-Modifier) which has specific benefits such as being easier to read and understand. It also has the ability to bring structure to any small or large projects.

If you have ever worked on a project that was growing, not only in size, but with team members too, this scalable and reusable approach comes in handy.

How Does BEM Work?

BEM’s methodology is more modular-based.

When writing your HTML, it would usually consist of a block element that has modifiers. The idea behind BEM is for developers to write HTML and CSS in a way that avoids inheritance issues.

As we all know, CSS in bigger projects can become really messy really quickly when not managed and structured correctly. BEM helps with this.

So we have an element, the block component with the class .photo {}, we could call this the parent. Any child selectors or elements of that parent would be named with double underscores .photo__description {}.

We can go a bit further with modifying the element using double dashes .photo–large {} – we call these modifiers. These can be used on the parent or child elements, as a way to quickly reuse and re-purpose blocks of code.

What Are the Pros of Using BEM?

The pros for using BEM are as follows:

• Better CSS performance – this is due to less CSS nesting making it quicker for browsers to render
• Less CSS conflicts due to the naming conventions
• Much easier to manage and maintain – confidently change modules of code without it affecting other modules and, therefore, not breaking anything
• The markup is much more easily read – any developer can see if any elements are depending on each other
• Time and cost-effective – makes debugging much quicker

What Are the Cons of Using BEM?

The only downside to using BEM is that, sometimes, the HTML can get a bit bloated with long unreadable names. That’s it.

Overall, the scale is tipping to using BEM on all future projects.

Do not look at BEM as a problem solver, but more of a long-term solution to building a longstanding and adaptable codebase.

If you need help with web development, contact us today and find out how our highly experienced team can help transform your project.