Why you must use BEM or CSS modules or styled components

Books on web development

Video version of this article https://youtu.be/8rZT0Xul7dE

Why would you need to use those things?

Basically, because CSS… is extremely difficult to get right… and it can get to a point where it’s completely unmanageable.

In this post I want to talk about what the problems with CSS are and how BEM / CSS modules / styled components solve those problems.

Problems with CSS

There are two problems with CSS, or CSS architecture (whatever you want to call it).
1. Global styles.
2. Specificity.

Problem – Global styles

We learned early on in programming that having everything global is a really bad idea.

Why?

Because anything can change anything in unpredictable ways. Then when x needs to use global A, it has already been changed by y and z so everything breaks.

It’s just extremely difficult to keep track of.

But it’s worse in CSS.

You have class .color-red.

When you change the styles of that class, what’s going to change on your website?

Everything? Nothing? Something?

Most likely everything.

If you want to change the page heading from red to blue, and you do it in the CSS, probably everything on the site will change along with it.

That’s the problem with global styles and global CSS. You can’t change anything without changing the entire website?

The solution (not really): Specificity.

Problem – Specificity

Why… Just make the class h1.color-red.

“Okay, no problem” you say.

But tomorrow you want some of the h1 in a special div, in which case you want the page heading blue.

“Okay, no problem” you say: .my-special-div h1.color-red {}

Okay not too bad…

Next year:

#my-id1 #my-id2 .foo1 .1000-selectors-later h1.color-red

Bad…

Specificity is bad.

Result

You have global styles, so if you change anything on the website you have no idea what else is going to change.

So you increase specificity. That’s fine in the short term, but a year later specificity is not impossible.

Now you can’t change anything at all, and if you change anything the whole website is going to change.

Solution – BEM / CSS modules / styled components

In one word BEM. (CSS modules and styled components basically do the same thing BEM does).

BEM is the solution because:

  • No global styles
  • Specificity is always kept as low as possible

No global styles

With BEM, everything is scoped.

Instead of:

.color-red {}

You have:

.sidebar {}

What this means is that for the lifetime of your entire project, if you want to change how the sidebar looks:
– You can change it in one place.
– The change is guaranteed to affect the sidebar only.

If you want global styles, you still have those. Just use variables.

Lowest specificity possible

Specificity always remains as low as possible:
– It stays at 10 most of the time (selector with a single class).
– It becomes 20 with pseudo-selectors (such as :last-child).
– It can also increase a little bit with modifiers and such.

At the end of the day, specificity will never, ever, go more than 50 or so.

And when it does increase due to modifiers and pseudo-selectors, it will always be manageable.

Because you’re never fighting against weird selector chains, you’re just using the natural selector for that element. E.g. :last-child.

Specificity will always be manageable and never get in your way.

Result

  • For the lifetime of the project, .sidebar always changes the sidebar ONLY as expected.
  • You never have to fight against specificity.
  • This will be the same for pretty much every component in your entire website.

Any downsides?

Nothing is perfect.

BEM doesn’t concern itself with issues such as:
– How to split up your blocks (components).
– Semantic naming and what to name things.

But those issues exist in CSS and programming in general.

Downsides that are exclusive to BEM:
– Nothing really…
– Some people complain about long HTML and CSS.
– CSS is not longer if you use SCSS.
– HTML is a bit longer, you win on that one. However there are utilities to make it the same as SCSS.
– Nothing really…

Conclusion

If you have experienced the pain of CSS with 100% global styles and insane specificity, then please use BEM (or CSS modules or styled components). Your CSS architecture will actually be manageable and not get in your way.

Comments

If you have experience with this topic, different opinions, or even the same opinion, please leave a comment for discussion.

^