CSS BEM - The What, How, and Why | Block Element Modifier Methodology

CSS code is messy. Actually, it gets messy over time, and only if you are not following a strict methodology. CSS BEM stands for Block Element Modifier and is a perfect example of a methodology that works!

CSS has many fundamental problems that result in code that is difficult to maintain and read. CSS is considered to be a mess and is hated by many developers. I was among these developers too, until I figured out the proper way to write CSS code. It takes some practice to learn BEM and chances are you won't like it at first, but as time goes, you will never want to move away from the Block, Element, and Modifier methodology. It's just way too convenient!

In this tutorial you will learn:
1) What BEM is, what are Block, Element, and Modifier,
2) How to implement BEM in your HTML & CSS,
3) Why you should take your time to learn BEM.

Timestamps:
0:00 Intro
0:18 What is BEM?
0:45 Breaking HTML into Block and Elements
1:19 Block and Element naming
2:51 What are Modifiers?
3:52 Why BEM?
5:11 BEM with SASS/SCSS
6:11 Summary

#CCS3 #bem #blockelementmodifier

[gerars]

What I've been reading so far it say that you can only go down one level with the elements. So, in this case Card__body__content is not acceptable because you went 2 levels down. I'm new to this but every document I've seen about the subject talks about this. Has this changed recently? Thanks

[chaitanyashahare]

The intro was epic XD paused the video to comment

[codelightsparkles]

Thank you for this well explained video. You’re a life saver!!

[patricknelson]

6:00 - I’m with you 100% on BEM for the stated reasons, but curious: Earlier you mentioned ability to Ctrl+F the codebase to find the class. One issue I’ve encountered with using Sass & prefixes is that it gets in the way of this typically. Do you have a process for that or do you just failover to the manual search (i.e. It’s a “Card” so at least you know where to look) or should you just scrap & prefixes all together in order to preserve searchability? 🤔

[yuryitikhonoff]

Content is awesome. Great job. Thank you so much.

[peterballa]

How a great video thank you! Well explained!

[DiegoVergaraLoza]

It makes no sense to me to nest classes using BEM. I think one of the benefits of it is that it reduces the need for nesting to a minimum by using specific class names

[grimmdanny]

BEM seems like a 'method' created by a designer who didn't know you could scope SCSS.

[emanuelYaish]

I very liked the explanation but I have a question, How to implement BEM methodology with other css libraries such as bootstrap or semantic-ui?

[MaksymMinenko]

Card__header__main-image is a wrong way of using BEM. You don't completely understand the methodology.

[RubberDuckCoding]

My like button turned black, not blue... I think I pressed it too hard

[elg]

Hey you're right I didn't learn thank you

[guntacaytar]

wrong. what u told is wrong. this is not BEM. there is nothing in BEM like x__y__z. this is wrong.