What is BEM naming convention for CSS: A Quick Explaination
Learn why BEM (Block Element Modifier) is a popular CSS naming convention for organizing code. Understand the use of double underscores and hyphens within the BEM structure in under 5 minutes.
Install Tubelator On Chrome
Video Summary & Chapters
No chapters for this video generated yet.
Video Transcript
So I get asked a lot about when I'm writing my CSS what the deal is with the double underscores and the double hyphens and stuff like that.
It's part of something called BEM which is Block Element Modifier and that's what this video is going to be all about.
But it's a Friday so that means we're going to be doing it in under 5 minutes.
So BEM stands for Block Element Modifier and it's a CSS naming convention that has a really high adoption rate.
So BEM again, Block Element Modifier, so in this case we're starting with the block and that would be my card.
So my class is just card just like that and I have two different cards. I have a light card and a dark card
So we have block and so my block is the card then we have elements inside of that
So in this case, I have an image. I have a title. I have my body text
So the double underscore here is when we're going into the elements that are part of that card
So my card double underscore image double underscore title double underscore body and I'm repeating those down here as well
So those are
are the elements that are part of my card block.
And then we also have modifiers,
so block element modifier.
And a modifier is something that instead of being
inside of my block is modifying that thing.
So this one would probably have the box shadow
that we see on both of these as well as the padding.
But that's about all that's similar.
Display flex or something like that maybe.
And then I'm gonna use my modifier to set the colors
that are going to be showing up on the two of them.
So I'm setting that that's going to give my background color and the color of my text. So this modifier is modifying the original
CSS so double underscore
Denotes the element that lives inside of my block and a double hyphen denotes a modification to that block
So to see why this is even worth bothering about let's go look at some other examples here
So in this first example, this is how most people start writing CSS and it leads to a ton of extra work on their part
I have a simple class for each card, I have a card light and a card dark here.
one completely just gets its own style. So card light and
card dark. So here if I wanted to change something on it, so
say I change the padding on this one, it's changing here, but
that card is not changing. So then I have to come over onto
this card and I have to change this one as well. And that's
just really annoying to have to go back and forth between the
two is a really basic example. We don't want to have to modify
it twice with BEM. I have a block class giving me the shared
styles for all my cards and a modifier class. So that's what
I've done here on this example I have my card and my card light and then my card
and my card dark. So if we look at the CSS we can see here my card has the
margin has a width padding and box shadow so if I change the padding here
both cards are going to get the change at the same time and if I look at my
modifiers this is where my background colors are coming in don't really need
that margin there but my modifier is changing the background color and the
color of my text inside of it.
The element classes, some people, I have div in my image.
my h2, my paragraph, but it can be worth having your element classes as well. So
if I come and I look over at example 3 here, they're useful for preventing
specificity wars, and I can never say that word, I know I did too many
specificities, but that's just how I say it because I can't pronounce it, but to
try and avoid running into wars like that, it's useful to give everything
