Writing clean and maintainable CSS using BEM methodology

We want our code to be clean, modular, reusable and ready for growth. It may sound simple — but it isn’t. When starting a new project we often leave CSS architecture as a second thought and go straight to the coding part. Doing so is easy and fun for us because we leave all the boring stuff behind. However, we form bad coding habits which lead to not so good code in the future.

Icon made by monkik from www.flaticon.com

Before starting any project we should set some time aside to carefully think about architecture of our codebase. With good strategy and mindset we can assure that whoever reads our code will be satisfied with it. Definitely a good thing, right?

So what is a CSS BEM?

The BEM stands for Block, Element, Modifier which is basically an explanation for it’s structure. The BEM methodology is nothing but another naming convention for our CSS classes. However, BEM gained its popularity mainly because it provides clean system for marking up our layout.

BEM — nothing but another naming convention1. Block

Block is standalone component that is reusable across a project and even between different projects. Block components are meant to be independent from parent components. We can say that the block is a top-level abstraction of a new component. It is worth mentioning that blocks could be nested if necessary.

2. Element

On the other hand, elements make no sense to be alone. They are supposed to be tightly connected to their parents — blocks.

3. Modifier

By now you could probably guessed it — modifier is a flag added to block or element so it makes them a bit more specific. They usually contain rules like that define different color or size.

The same rule applies to both elements and modifiers — They are part of the block with no standalone meaning.

Here’s the code sample from CSS-Tricks:code sample from CSS-Tricks

It is pretty self explanatory. We have the class .btn which acts as block level component. Therefore it can be used on its own throughout the project. It stores all of the necessary rules for the button to be displayed properly. There is one child element with a class of .btn__text which makes no sense to be independent as it heavily relies on properties that are defined in the .btn class. Last but not least, we have two modifiers whose aim is to change parent component by changing its size or color.

BEM in action

If you’re interested in exploring on your own, you could take a look at source code of 30-seconds-of-CSS. The whole project was done using BEM methodology which enabled us to scale the project without any single problem.

A curated collection of useful CSS snippets you can understand in 30 seconds or less.

Conclusion: benefits and drawbacks

By now you have probably understood the idea behind the BEM naming convention so lets discuss both benefits and drawback of using BEM in production.

body[data-twttr-rendered="true"] {background-color: transparent;}.twitter-tweet {margin: auto !important;}

Replace "can you build this?" with "can you maintain this without losing your minds?

 — @necolas

function notifyResize(height) {height = height ? height : document.documentElement.offsetHeight; var resized = false; if (window.donkey && donkey.resize) {donkey.resize(height); resized = true;}if (parent && parent._resizeIframe) {var obj = {iframe: window.frameElement, height: height}; parent._resizeIframe(obj); resized = true;}if (window.location && window.location.hash === "#amp=1" && window.parent && window.parent.postMessage) {window.parent.postMessage({sentinel: "amp", type: "embed-size", height: height}, "*");}if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.resize) {window.webkit.messageHandlers.resize.postMessage(height); resized = true;}return resized;}twttr.events.bind('rendered', function (event) {notifyResize();}); twttr.events.bind('resize', function (event) {notifyResize();});if (parent && parent._resizeIframe) {var maxWidth = parseInt(window.frameElement.getAttribute("width")); if ( 500 < maxWidth) {window.frameElement.setAttribute("width", "500");}}

Yes. BEM can be annoying initially. It may be hard for you to adjust to writing classes with longer names. There is definitely going to be more code and that code might look a bit funny at first. However, it is worth it and you should at least give it a try. By writing CSS that everyone can understand you increase its value in the long run and that was our goal from the beginning of this article:

We want our code to be clean, modular, reusable and ready for growth.

Writing clean and maintainable CSS using BEM methodology was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.