This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the privacy & cookie policy.

BEM is my true love

BEM is my true love

CSSSoftware EngineeringDevelopment

CSS should’ve been written in BEM!

I know I know, it’s a weird way to say it, but I truly believe that BEM is that good!

CSS is ignored a lot of times by developers. You hear a lot of that it’s not a real language, CSS is for weak. But they get to the breaking point fast and then this happens:

text

A saviour to this situation is BEM!

How can BEM help and why is it better than anything else? Well CSS as any other programming language is interpreted by an engine (your browser). Because of that, there are computational expenses when your write your filthy selectors.

Whenever you write something like

#header .nav ul li a {
  /* awesome css here */
}

The browser reads from right to left your code to match your selector.

So, in this case, it finds all anchors on the page, then from matched elements, it finds those within a list item, then those within an unordered list, then those within any element with a class name .nav and then those in the element with a header id.

That is a lot of work don’t you think so?

To solve this problem you can easily add a class name to your link so that the browser does just one simple query.

Yeah, easy-peasy, problem solved. However, you have to assign a new class name for every link that is different from the other one, in behaviour visual representation and so on. In a project where there’s more than 1 page, it becomes a mess really fast and easy.

To solve this problem finally BEM comes in handy. BEM means Block Element Modifier Please note the singular count, it is very important. BEM refers specifically to your selectors nothing more than that. There is a specific way to write your BEM selectors. These are the rules:

  • you refer to your block as .block
  • you refer to the element always as .block__element, you cannot get just to the .element because in this case, your element is actually a block.
  • you refer to any modifications on the element or on the block as .block--modification or .block__element--modification

No more rules, just follow these rules and it’s going to look perfect and you’ll enjoy your life.

BEM is a CSS component library for your js components. As you try to keep your components as small as possible it BEM becomes better. Let’s get back to our selector we mentioned above and split it up accordingly. #header first of all never use an id in your CSS. CSS is for generic use, for elements that may or may-not appear multiple times on your page, while IDs are for identifying one element. It’s like the identifier you have in your passport, nobody in the world has your id, same should apply to your elements. Now back to our styling methodology, header is a block it contains multiple elements. Normally you’d have a logo and a nav in your header, thus you’d have something like this in your file:

// _header.css
.header {}
.header__logo {}
.header__nav {}

Now yes we have links and a list and stuff within the nav, but nav is actually a block. So it becomes as follows:

// _header.css
.nav {}
.nav__list {}
.nav__item {}
.nav__link {}
.nav__link--active {}

What does this give us? It seems pretty similar, just more files and lots of things to think about. Well yes, but at the same time the CSS Engine, will do only one query for every single particular case and we won’t overload it with unused selectors.

You can always write your selectors as

.header .nav .nav__link

but this is not BEM this is an anti-pattern, to solve that, it’s better just to write down a modification on your link or block and that would solve up all the problems you have.

Another benefit here is that you usually split up the CSS files separately and keep the names consistent with the block names, so whenever your encounter your block and want to update your legacy code you just open your file-browser in the editor enter _header.css and you know where to do your modifications, you don’t need to search throughout the whole project and see if the header is somehow related to your blog-header.css or contact-header. You know that those files live their life and are not related to your file in any possible way.

As a bottom line, I want to ask you and every other developer give it a try, and once you’re in there’s no way out, maybe only styled-components, but that’s a topic for another discussion.

Published on Mar 2, 2020

Feeling inspired?

Let's talk