How I Moved a Step Closer to Clean CSS and How You Can Too (with the BEM Methodology)

Around one and a half years ago, I was young, I was fairly new to building websites. At the time, I was mainly writing static HTML and CSS sites and experimenting with some basic vanilla JavaScript as well.

I was only starting out with webdev, and I had little experience in what I was trying to do. But, nevertheless, I had an idea for a pretty simple web app, and I was set on building it.

I wanted to build a really simple site which essentially compiled data on U.S. politicians into a readable index, and also included U.S. congressional committees and some latest news.

I started building out the site, again, in plain HTML and CSS. All my styles: in ONE file. I had NO structure and no architecture for making my CSS readable or my classnames understandable.

I was just going along and mixing hyphens and underscores and camelcase all over the place. Of course, the project quickly went out of control as I could not understand any of my styles. Eventually, I managed to make it work, although it did have numerous bugs and the site does not work on mobile.

If you'd like, you can actually check out this project, it's called CapitolNet.

Despite the several clear mistakes I made in this project, I learned from them. I knew something had to change, and that I needed a system for making my CSS more scalable because just "going along with it" wasn't going to work.

And that’s when I discovered the BEM methodology.

Now, to be clear, BEM does not fix everything. BEM is a system to make your CSS more readable and less confusing, and is only one way to help improve your site's CSS. BEM is simply one step closer to clean and scalable CSS.

Okay, so what is BEM?

BEM is a system to write classnames and standardize CSS style specificity.

BEM stands for:

• Block — A standalone component which can be used multiple times across a site. Examples: a container, form, or navigation bar.
• Element — A child of a BEM block. Examples: a button that is only ever a child of a form block, a header which is only ever a child of a container block.
• Modifier — Any specific visual detail or style to a BEM element. Example: two buttons, one with a dark modifier which is black, and one with a light modifier which is white.

What do BEM classes look like?

BEM classes are written in the following format, and should always be used across a project using BEM:

Note that a BEM class does not need to include everything — a block does not NEED to have an element and modifier, though it could.

Selectors in CSS are written with just classnames, like: .block__element--modifier { /* styles */ }.

This classname-only selector system standardizes all CSS specificity. CSS specificity can be confusing, with more specific selectors being prioritized over less-specific ones, and BEM fixes this problem with just ONE part of the selector for ALL styles.

Here are a few BEM classname examples and their selectors:

• form__submit-button → .form__submit-button { /* styles */ }
• form → .form__submit-button { /* styles */ }
• form__slider--light → .form__slider--light { /* styles */ }
• form__slider--dark → .form__slider--dark { /* styles */ }
• header → .header { /* styles */ }
• header__cta-button → .header__cta-button { /* styles */ }

BEM in Practice

Here is an example Codepen of BEM in practice. Just look at the classnames in the HTML and the selectors in CSS.

Conclusion

I hope you enjoyed this introduction to BEM.

One last thing I would like to say is that, while I realize BEM is old and there may be new tech out there that renders it less useful, I have found it to be relevant and helpful in many of my projects for the following main reasons:

• BEM is readable and you know what to expect with BEM classnames. A lot of other devs use BEM as well so it is great to know, even if you do not use it yourself.
• BEM makes CSS modular and scalable. It is easy to write BEM classnames and selectors once you get used to it. When I started using BEM, I saw instant benefits in terms of how clean my CSS was and how easy it was to add new blocks and elements into my stylesheets.
• BEM is a convention. A lot of people do not like conventions because they limit configuration, but I think that, at times, conventions provide a standard as to what to expect from your code and others, and makes it easier for other devs to migrate to your code.
• One hidden benefit I have found: after some time using BEM I realized that I write a lot less CSS comments than I used to. BEM can make your code much more readable and thus makes comments less needed at times.

Again, I hope you found this article to be an effective starting point for writing cleaner CSS with BEM. I write a lot about CSS on my blog, and you can check out a few of my articles below:

• Building the Flipping Card Animation in Plain CSS
• Possibly the Most Useful CSS Trick

Thanks for scrolling.

— Gabriel Romualdo, 4 December, 2019