CSS Foundations

Block Element Modifier (BEM)

CSS Foundations

Check out a free preview of the full CSS Foundations course

The "Block Element Modifier (BEM)" Lesson is part of the full, CSS Foundations course featured in this preview video. Here's what you'd learn in this lesson:

Emma discusses design methodologies used to organize CSS code. The block element modifier methodology helps create reusable components and will be the methodology used in this course.


Transcript from the "Block Element Modifier (BEM)" Lesson

>> 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.

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?

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.

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.

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.

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.

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.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now