BEM 101: How to Make Web Design Organized & Scalable

This is one of those tutorials that will 100% change how you develop websites, so don't sleep on it!

Too many sites out there are "good looking," but when you look at the underlying page and component structure, CSS, etc. you realize that it's actually a nightmare in terms of scalability and maintainability.

Styling is just haphazardly tossed around to achieve an initial objective with zero thought put into future-proofing the design and layout.

This is a huge failure. It doesn't matter how pretty a website is, if it can't be easily maintained and scaled, you've failed as a developer.

In this training you'll learn a specific methodology called BEM (Block, Element, Modifier) for organizing your website's styling. The benefits of BEM are enormous:

• Organization
• Scalability
• Semantic accuracy & readability
• Avoiding class name collisions
• Easier writing
• Easier debugging
• Easier modification
• Avoid specificity issues
• Faster rendering
• "Self-documenting code"

Never again will your sites fail what I call the 3-month or 6-month rule. Never again will you develop a pretty website that has a horrific styling architecture underneath.

Not enough people take pride in building sites with a clean, efficient, concise, organized structure. In my opinion, this should be one of the main goals because scalability and maintainability is everything.

00:00 Context & Black Belt Development
05:20 Why BEM?
08:38 Examples of Bad Dev
23:34 How BEM Works (Structure)
35:05 Example CSS
36:22 Real-World Example
39:07 Adding the HTML Elements
41:03 Adding the BEM Classes
43:36 Styling the Component
54:24 Adding a Modifier (Dark Component)
1:00:00 Final Thoughts

[Gearyco]

Just realized I never showed what the grid of 6 cards was for in the beginning. Too much to cover! It was to show how global styling changes work to highlight one of the main goals of scalability. But I forgot about them. Oh well! You end up seeing global styling control in the end example anyway.

[alyssadotson]

I am new to web development, and I have blown through your videos over the past week. I NEVER comment on here, but I am genuinely thankful for your content. Will be joining the inner circle soon, thanks for taking your time to create these tutorials for us!

[davidnickson]

My lord I’ve heard you talking about bem for ages and I sort of knew it, but I’m so glad I found this old tutorial! 100% know how to structure everything now and the dark card was a bonus! Cheers legend!

[bluefuzecom]

Been a designer for 22 years now, and I feel like I have been doing this in my own unique way. But it’s really cool to see some kind of formalized system here. Nice work!

[francesgonzales]

I went thru a junior front-end developer interviews where one interviewer said that my CSS is not structured and organised but my Front-end is close enough to the mock-up. I came across BEM and glad to learn it from this video first-hand. Your video is easy to understand from concept of BEM to practical usability is on point. Now I will structure my CSS in a whole new perspective. Thanks, Kevin for this!

[jasonetaylor]

Great tutorial. I've used BEM in the past but now realize I wasn't using it 100% correctly.

[om]

OMG you are a life saver i am a newbie and I found you as my mentor I am starting from this video I am getting the best practices i love this content how is this on youtube this invalueable and only 6000 views... this is gold in web development which make your foundation to be a good and best developer

[SimonAngel]

I had been running into reusability issues with classes and this BEM explanation really helped

[bjoernzosel]

super valuable and professionell content! I never used BEM. Makes maintaining and changing existing websites a piece of cake.
What I find really terrible is that if one makes a chump video explaining how Elementor works, there are thousands of views. But professional content, which is much more valuable, unfortunately not. It's just that most flies sit on the dog pile :)

[MrAverageViewer]

Your tutorial was outstanding!! I've combed the web, trying to find a cohesive & in-depth explanation of BEM, and after having viewed your tutorial, I finally understand the concepts, and the rationale behind the concepts. Thanks for giving a thorough, yet concise walkthrough of BEM!!

[VeriousSmithIII]

Very cool. Been writing css since 2001 and hadn't ventured into BEM. Thank you

[arpitgupta]

I was trying to implement bem technology but i didn't know what it was. I came across your video and the way you explained was crystal clear. Thank you for the great content and you just earned a subscriber!!

[chelofonte]

FANTASTIC Kevin, this is something so necessary for me, you probably can realize it due to my recurrent questions in the Inner-Circle, you don't know how much I appreciate this video.

[notagilbert]

2 Years later and i found this gem!

Thanks Kevin :)

[ReubenHochstetler]

The BEM naming system has been a real game changer. I don't recall where I first heard about it (probably one of Kevin's other videos) but I always had a little bit of confusion around the element and the modifier. Now it's perfectly clear. Thanks Kevin for another great tutorial!

[rouisaek]

This is the best `BEM` tutorial on the planet!!!. Thanks for sharing <3

[RR-okwz]

Wow, Kevin. This is the first video of yours I've watched, and I'm floored. Your teaching style is immaculate. and fairly easy to follow (granted I know a little about CSS, but def not an expert). I'm not convinced I need to watch all your other videos, especially the Bricks-related ones. Thank you!

[alineduchesne]

This video was perfect timing. I purchased Oxygen quite some time ago and it was too in-depth for me as a newbie. I've dabbled with various themes and when I got the email about the new Oxygen, I decided to jump back in since I've learned quite a bit since my first purchase. Watching this made quite a few things click and I immediately knew what some of my past mistakes were. Very well done. Looking forward to checking out some of your other videos.

[Hellboua]

Didn't know about BEM till now. I wish all teachers were as instructive as you are ! Keep up the good work. Joevin, fresh inner circle member.

[BrianYiga-dw]

WOW! This has been so helpful! Have been through many tutorials but yours trumps them all. Thank you so much!!!