Up until recently BEM was only a buzzword to me. I knew it had something to do with CSS, but wasn’t sure if it was a library, tool, plugin, etc. I decided to spend some time researching BEM and first stumbled upon this article, which quickly led me to what I think is the home page for BEM. After reading a bit about BEM I discovered that BEM is not something you install, instead, it’s a methodology that was created to help developers write organized CSS. BEM stands for Block Element Modifier. It’s purpose is to help you organize your CSS and prevent you from having to copy and paste CSS.
This post is not an article on how to get started with BEM, nor is it about best practices when using BEM. There’s plenty of articles on the subject already out there, and I linked two very helpful links at the beginning of the post. Instead, I will tell you about my experience with BEM.
I have an open source project that I created for Hacktoberfest ‘19. The project was created to be beginner friendly and it has seen some action over the last couple of Hacktoberfests. I approved quite a few PR’s. It’s been fun seeing the project evolve, however, the project’s CSS kinda got out of hand. The experimental, approve PR’s and see what happens idea turned in to somewhat of a mess. This was the perfect place to try to use the BEM approach and clean up the project (before Hacktoberfest 2022). I read through the Quick Start and Key Concepts sections of the BEM docs and got started on the cleanup.
During the beginning of the cleanup/refactor I was second guessing the meaning of what a “Block” is vs an “Element”, and when to put what CSS in a “Modifier” vs an “Element”. After reviewing the docs I felt like I got the hang of it. The simplicity of having only three categories to remember made BEM easy to pick up. I’m sure my implementation isn’t perfect, but I can definitely see the benefits. BEM would make sense in a large project. BEM would also be beneficial to newcomers of a project as it makes reading the CSS soooo easy.
At this point I’m unsure if I’ll use the methodology in future personal projects. I’ve been tinkering with Tailwind a bit lately, but, if I choose to not use Tailwind I may use BEM to help me organize my CSS. I think BEM is great, and it definitely helped me get the Motivational Cats project sorted out. If you’re curious to see my refactored CSS file, you can have a look here. If you want to contribute to the Motivational Cats project, please do so (it doesn’t have to be in October).