Why I use the BEM naming convention for my CSS

If you've watched any of my recent videos, you'll know that I use the BEM naming convention for my CSS classes. In this video, I explore why I use it, and why I think you should, at the very least, use some sort of naming convention.

BEM stands for Block, Element, Modifier, and it presents us with a way to make more organized and readable CSS.

I like BEM (mostly, I'm not super strict with my use of it) and think it's a great methodology for naming my CSS classes, but there are many others such as OOCSS, SMACSS, Atomic, and many others. BEM isn't the right answer, it's simply one possible answer. I strongly suggest you read up on the others as well and try to adopt one that you think makes the most sense.

#fiveminutefriday
---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[KevinPowell]

What's your opinion on BEM? And if you use another one, which one do you use?

[JamesMartinBass]

I've struggled with how to best organize my CSS so the parent/child relationships are clear. This looks really promising. Thanks for explaining it so clearly.

[kamaboko]

BEM is awesome. BEM and SCSS is a great combination.

[jarynzr]

important note that when using BEM make sure that you already got the actual mockup of the design. You have to properly identify each component first

[ozzyfromspace]

I was coding a React SPA last night and finally had the mobile layout done, but realized that I hadn't thought about how to modify my grids for tablets and desktop. The thought of making poorly organized edits for this drove me nuts, so I went on a search and found BEM. I'm excited to try it. Scrapping my work and starting again, as many times as it takes to do a good job. Nice video Kevin, it was highly informative!

[mattcroat]

I just started enforcing this the other day. I didn't like it at first but I got used to it and now I'm a fan.

[busyrand]

I just started working on projects for clients and saw this in the wild. I'm happy to have seen things previous to encountering it. It makes much more sense after having to deal with it for a while without understanding what was going on.

[jmcbade]

This is a really good explanation and I really appreciate the discipline and outcome to present this in the 5 min duration. Any definition standard such as BEM could easily be overly granular if taken too far. I think the key is using BEM enough that if you have to go back and make changes they work well on a global basis and having to hunt down and tweak too many specific details is where the balance is most productive.

I would like to see more of these Kevin. :)

[LovingCauseKarmaHandlesItForMe]

I LOVE looking at a stylesheet that follows the BEM convention, its SO clean.

[HU-]

I have learnt so much in the past two weeks. Thanks Kevin. HTML, CSS, Mother, Child, SASS, BEM... 😀 So much yet to learn!

[MrJoefinisher]

Never seen of CSS naming conventions like this. This is awesome. Thanks so much for posting.

[tonimaunde]

LOL the backtracking at 4:01 is glorious. Thanks for the laugh and knowledge, Kevin.

[leonardoromero]

I'm enrolled in my first programming bootcamp but I can't stop coming to your channel for clarification on almost every topic so thank you for that! You rock!!

[maxfate]

I started BEM. It super easy to organise the css. Scss with bem means awesome

[tbinyt]

I learn so much from your videos. I am about 80% through the Conqering Responsive Layout course (it's free guys!! FREE!!). I really appreciate your knowledge and time. Thank you!!!

[SystemXX]

You've got my respect and subscription due to this amazing course. Will watch what's coming next

[garrystewart]

Can’t thank you enough for all the things I’ve learned from you. I still feel like a novice when I watch your work, but slowly it’s seeping into my head 😂 A loyal fan of your vids

[paoloose]

I dont know how I survived all this time without that

[apphacker]

I like how you're flexible about strictness. Real world sometimes requires some thought, not mindlessly following rules. I really like BEM though!

[daniamsalem]

I've been reading up on BEM/SCSS while on your Conquering Responsive Layouts course and the one thing I was worried about was how deeply nested the rules get when compiled. However, when you toggled to "compiled css" in CodePen it all became clear. I will totally be implementing BEM this week.