How To Organise Your CSS (Using BEM)!
By: Alfie Darko
Tags: Css3, CSS, Front End Development, Frontend, Web Development

You ever worked on a project and found the stylesheets were a mess? Multiple classes that do almost the same thing? CSS class naming looking super crazy? Zero structure and no kind of logic followed?

Then this is the article for you.

When I started off with CSS a long time ago, it was a messy process.

There was absolutely no structure to naming my classes & it was very ‘anything goes’.

“How CSS looks when somebody else writes it”

A long time ago I said enough is enough. I needed to read about how to best organise my CSS. This would help when I handover freelance projects that were to be worked on by others. It would also help me fix other people stylesheet issues!

Thinking In Components

The first thing I learnt was to think in components.

When you first learn about CSS, one of the main things that comes up is that you have to think in boxes. This is a follow-on from that style of thinking.

I think of components as a logical group of CSS boxes. Think about your favourite websites you frequent. Let’s say twitter.

Twitter Timeline

If you had to break down twitter into components, the first thing that would come to my head is the tweet timeline.

It’s a big component made of small components (Tweets) when you really break it down.

The process of mentally breaking down a big component into the individual components, and think about how these relate in terms of collections of boxes (div’s, span’s, p’s etc) really helps with the UI side of front-end development. When you get a good grasp on it, it allows you to translate design to code quite rapidly.

I wrote an article about CSS Box Thinking [here]

BEM

I started looking at how other people organise CSS styles with a component based approach and I came across something called BEM.

BEM!

Block. Element. Modifier.

What the hell is that? It’s a naming convention for CSS classes. Based on taking a modular, component based approach to development.

Here is an example in regards to an imaginary checkout form using standard CSS.

BEM using standard CSS

Personally, I always use SASS! (Or PostCSS). It allows me to write better looking CSS like below:

BEM using SASS

The & you see above is a SASS & PostCSS feature. It’s really just a shortcut to reference the parent CSS selector without having to type it out!

See how we don’t have to repeat checkout-form all over our file? (Don’t Repeat Yourself Principle).

This allows you to nest CSS classes in a logical way and lets you keep all related classes together under a main CSS class!

How everything looks in HTML

Can you see how BEM can start to give your CSS naming conventions some structure and predictability?

When you get used to it, naming your classes becomes simpler. We reduce horrendous and nasty looking styling & thinking about naming.

It can help you avoid specificity clashes from careless naming & allows you can put your mind towards other things instead!

If you often run into issues with class name clashes , this can really help you name things in a way that avoids that.

Let’s go through and describe each part of the BEM system in a bit more detail.

The Block

We can think of the block as the overarching component that contains many elements.

Carrying on from the examples above, a checkout form could be a block, as it would have many elements. I try and think about things as components and it really goes well with the BEM methodology.

The Element

In the example above, we can see that our form block contains a few elements. __title __input & __button .

The double underscore __ in front of the element’ name is to let the developer know that this is the name of an element.

I try to use it to try and correspond with HTML elements where I can.