Block Element Modifier (BEM)

[00:00:00]
>> So, when we're building small websites, it's really not usually a big deal how we organize our styles or how we name things. But when it comes to larger, more complicated projects, how we organize our CSS affects how long it takes to write the code, or how easy it is to read, how much we have to write, etc.

[00:00:17]
So, there's this architecture, naming architecture, called BEM, or Block Element Modifier. You might have heard of it, it was pretty popular a few years ago. It's a design methodology that helps create components and code sharing and create semantic names. And you might have heard of other methodologies like Atomic, or OOCSS, lots of acronym names, right?

[00:00:40]
SMACSS, I don't know if people say that. Is it S-M-A-C-S-S? I don't know, I call it SMACSS. But essentially, We've got blocks, elements, and modifiers, so it's gonna break down elements into these different categories. So block is a standalone entity that's meaningful on its own, so like header, menu, input, things like that.

[00:01:00]
The element is part of a block that doesn't necessarily have a standalone meaning. So it could be menu item, list item, header title. And the modifier part is something like disabled, highlighted, checked. It typically is used to change appearance or behavior. Okay, what does that actually mean? So, when we're naming our elements for this project, we will use block element modifier.

[00:01:24]
Now if you're using a CSS framework, or a JavaScript library, or things like that, you might not need this, right? This is because we're using plain CSS. It's nice to have some sort of naming architecture in place to create those semantic relationships. So, our block is prefaced by a dot, it's a class name.

[00:01:43]
The element is prefaced by two underscores, and the modifier is prefaced by two hyphens. So an example might be a form. Let's take a form, we set a class of form on that form element. Inside we've got two inputs on a button. So, those are elements inside that block.

[00:02:03]
So form__input might be that element name. Same thing for the inputs for the button form__button. And then we'll have modifiers for the button and the input. So it might be a disabled input. It might be a large button, so it's changing that appearance. We'll use this when we're naming our classes in the next coding section.