Learn CSS BEM (and avoid these common mistakes)

In this video, we're diving into BEM, which stands for Block Element Modifier-a popular semantic CSS methodology. We'll break down the basics of BEM, including blocks, elements, and modifiers, and show you how they all work together. Plus, we'll cover some of the common questions people have and highlight mistakes to avoid.
CodePen: codepen.io/dmtrmrv/pen/vYMEGpx
Chapters:
00:00 - Intro
00:14 - What are CSS Methodologies?
00:49 - What is BEM?
01:13 - What is a Block?
01:59 - How to Name Blocks
02:37 - Semantic vs. Functional Blocks
03:00 - What is an Element?
04:14 - CSS Implementation of Blocks and Elements
04:44 - What is a Modifier?
05:49 - Can I Use a Modifier with an Element?
06:33 - Should I Use a Modifier or Create a New Block?
08:20 - Can a Block Be an Element at the Same Time?
08:59 - Can a Block Be Another Block at the Same Time?
09:50 - Can I Use Utility Classes with BEM?
11:03 - Don't Use Margins on Blocks
12:41 - Don't Nest Classes in CSS
13:23 - Don't Use BEM Entities as Utility Classes
13:53 - Don't Create Elements of Elements
14:22 - Don't Create Blocks with Too Many or Too Few Elements
15:11 - Wrapping Up and Thank You for 100 Subscribers!

[@bls512]

Extremely helpful, especially your code pen. I'm curious how you approach a larger project using Utopia. Huge thanks!

[@KOBE42__]

For a new channel, this video was so well done and I’ve saved it for future reference. A lot to take in but I feel like anything, once you do a couple of projects it becomes second nature. Thanks

[@dmtrmrv]

Thank you! Yeah, once it "clicks" you don't have to think about it!

[@valery3149]

Oh my god! I'm looking for this video for a while ! Very very interesting and well explained! I thank you a lot!

[@dmtrmrv]

Thank you! Glad it was helpful!

[@AJ-vy4yu]

This deserves a million view. I had used BEM the wrong way.

[@dmtrmrv]

Thank you @AJ-vy4yu! Curious what did you do differently?

[@AJ-vy4yu]

@@dmtrmrv I created elements of elements and blocks with too many elements, to name a few. I had really long-ass class names😆

[@jclewis33]

Great video. Very helpful!

[@dmtrmrv]

Thank you. Glad it was helpful!

[@VdLifts]

Great video. Keep it up!

[@dmtrmrv]

Thank you, glad it was helpful!

[@Denis091294]

Great advices for working with BEM. Thank you!

[@dmtrmrv]

Thank you for the kind words, happy that the video was helpful!

[@seankennedy7970]

Great video. Keep it up, I've been a frontend dev for 15 years and have flirted with BEM in work projects but never fully committed - this video has inspried me on my next project

[@dmtrmrv]

Happy to hear that! Yeah, BEM can be a bit tricky and definitely has its downsides (might be a good topic for another video). But I'm still picking it for every new project.

[@EvilArtifact]

Thanks for the video. I’ve been using BEM since 2015 and love it, but videos like this help to get my mind back to the fundamentals that keep my code clean.

[@dmtrmrv]

You are welcome! Glad you found it helpful. I agree, fundamentals are super important!

[@web-atelier]

Excellent, thanks 👌

[@dmtrmrv]

You are welcome!

[@rogerpence]

A very good explanation. I am a big fan of CSS nesting and this is the first BEM video I've seen that rationally compares the two. I really like your component-based approach (both to CSS and your video topics) and am gonna work a little hard a BEM in my next project.

[@dmtrmrv]

I'm glad you liked the explanation! I believe there's nothing inherently wrong with nesting; in fact, some methodologies even encourage it. Based on my experience though, both reading and writing styles become easier when nesting is limited and done purposefully and specificity is maintained at the lowest possible level. Feel free to reach out if you have further questions!

[@pareshkamaliya2493]

Wow today I learned something new. Could you create a beginner-friendly CSS playlist, if possible?

[@dmtrmrv]

Hey Paresh, thank you! Are there any specific aspects of CSS you find challenging to grasp? I'm developing a content plan for the upcoming months, and your feedback would be really helpful.

[@pareshkamaliya2493]

@@dmtrmrv There are good tutorials available on KZbin, but it's important to understand how much CSS is sufficient and how it's applied in the industry. Essentially, create something that is beginner-friendly yet meets industry-level standards, which puts us a step ahead of others.

[@dmtrmrv]

@@pareshkamaliya2493 Thank you for these ideas. I'll def address this in future videos.

[@JuanCastro-C]

Hi Dmitry, I like the way you explain, great content, thank you. New subscriber here!

[@dmtrmrv]

Hey Juan, thank for the kind words! Welcome aboard!

[@CohenNikesh]

awesome vid!

[@dmtrmrv]

Glad you enjoyed it

[@as.abdulazeem]

Thanks, awesome.

[@dmtrmrv]

You are welcome! Thank you for asking about BEM in the first place!

[@hudinigosh7862]

Thanks for making css video, i really want to learn css. you explain so well please make a css playlist.

[@dmtrmrv]

Thank you for the kind words! Are there any specific topics or concepts within CSS you'd like to see covered?

[@moeinmnia]

💯

[@vertigoz]

Nada como CSS do BEM

[@anneyo5627]

Never use margins on blocks...but whats then the best practice to create space?

[@dmtrmrv]

@anneyo5627 That's a great question. Ideally the spacing is created with properties like "gap" or by using the "lobotomized owl" technique. Check out the CodePen: codepen.io/dmtrmrv/pen/vYMEGpx?editors=1100 You can find examples of both: .grid { gap: var(--step-1); } .content-flow > * + * { margin-block-start: var(--step-1); } If that's not enough, we can always use margins on elements, because they aren't reused on their own. ".button" in the same CodePen is a good example. Look at the ".button__icon" element: .button__icon { margin-inline-start: var(--step--5); } All this allows us to reuse components in different contexts without any spacing overrides. Let me know if this answers the question!

[@anneyo5627]

Thank you so much! This was helpfull. First time i've heard of the 'lobotomized owl', interesting!

[@dmtrmrv]

@@anneyo5627 You are welcome! You can read more about it here: alistapart.com/article/axiomatic-css-and-lobotomized-owls/ The article is 10 years old, but it's still relevant. "gap" was not around at the time, but it's still not a full replacement.

[@vincentjacquet2927]

Nice video. While I think BEM is still useful as methodology, I wonder if its implementation, i.e. the naming convention to keep the specificity at (0,1,0), is still relevant considering that we now have :where() to set the specificity to (0,0,0). What do you think?

[@dmtrmrv]

That's a great question. I tend to use :where() for setting up the default, most common look of elements. And I actually find it quite handy that blocks and elements get this slight increase in specificity-it helps them stand out against the defaults. Sort of sit on top. I'm curious to know how you'd use :where() with/instead of BEM.

[@vincentjacquet2927]

​@@dmtrmrvFirst a little disclaimer: I am not a designer, I mainly work on web applications and the styling takes less than 5% of my time. I want the markup to be as simple as possible, so BEM implementation is annoying because I have to set classes everywhere. But I understood that this makes it easy to style a "breadcrumb-item". I am stil experimenting but now I tend to create parametrizable styles. Say I want to build a breadcrumb and the markup I want to have is the one from ARIA APG breadcrumb example. I would set up custom properties on the .breadcrumb "block" class, use :where to rely on the DOM to find the "elements" without increasing the specificity, and apply the styles on them using the custom properties. .breadcrumb > :where(ol) > :where(li + li)::before { padding-inline: var(--breadcrumb-item-padding-x); ... }

[@dmtrmrv]

I see; that's more of a CUBE flavor (cube.fyi/). Another methodology I really like. The downside to writing styles like this is if anything in the DOM moves, the styles will break. However, in the case of components like Breadcrumbs, which have a super standard structure and rarely change, it's perfectly fine to write it even simpler: .breadcrumb li + li::before {}. This is because the likelihood of the breadcrumb component having two lists with two different types of elements is very low. It's also a matter of consistency. If the rest of the project is written in BEM, it's still advisable to add classes; otherwise, it's a perfectly acceptable approach. Glad you brought it up! I like conversations like this!

[@gaming_with_raza7867]

I learned html css and js. Now i am learning backend but the point is i cannot make Good looking layout specially i stuck in responsiveness Anyone any Suggestion?

[@patunolaibukun2506]

where have you been

[@MrAbbo11]

praise the lord for tailwind so i could away from this completely. I know tailwind is probably not suitable for all type of projects, depending on its size. That being said, I'd only ever use BEM if I absolutely had to.

[@dmtrmrv]

Like you said, there's a time and place for everything. Both BEM and the utility-first approach have their drawbacks and advantages. I'm curious if you've come across this article: nuejs.org/blog/tailwind-vs-semantic-css/?