BEM 'n' stuff

I'm working on a pretty neat angular filters project, and I started writing classes using the very fancy BEM methodology. The angular post is already pretty long, so figured I would quickly create a post to explain everything I know about BEM.

BEM stands for block-element-modifier. It might sound complicated, but it's really not. Once you start implementing this in your day-to-day code, you'll get used to it super fast.

Try to think of BEM like this, with the underscore and dashes styling: block__element--modifier

Starting with block.. A block can be many things, e.g. header, container, footer. It can also be something as small as a button. In my example below, the class filters is the block. filters has many elements inside of it. It's got a list, list-items. The elements class should look like filters__list. It will keep the block class name, and append the element with two underscores, e.g. __list. This is great when writing scss, because it's quick, and easy to find it within your files. I prefer the first version in my example below. When styling gets deeply nested, it can be a pain in the ass to modify, rework, etc. Either way works.

scss
.filters {
    &__list {}
    &__list-item {}
}
//OR
.filters {
    &__list {
        &-item {}
    }
}

A modifer is just a modified version of the element. So let's say a list-item has a background color, and it applies to only one of them, the modifer would look like this filters__list-item--bg. The element would have both classes though, so the it would look like this:

html
...
<li class="filters__list-item filters__list-item--bg">
...

Within the scss, the modifier should have minimal styling since it inherits most of the classes from the element.

scss
.filters {
    &__list-item {
        &--bg {
                background: $red;
            }
    }
}
//OR
.filters {
    &__list {
        &-item {
            &--bg {
                background: $red;
            }
        }
    }
}

There is also something called block--modifer syntax that I use a lot. Especially with smaller block elements like button. In my filters example, I'm creating a default button styling, and a button for collapsible elements.

The block class in this case is button, and the modifier is button--toggle. The main difference with --toggle is that these do not have a background color, and is flush to the left of the component.

Here's a sneak peak of the angular filters html I'm working on. Part 1 should be up tomorrow afternoon!

html
<aside class="filters">
  <h1 class="h6">Filters</h1>
  <ul class="filters__list">
    <li class="filters__list-item">
       <button class="button button--toggle" type="button" data-bs-toggle="collapse" data-bs-target="#category" aria-expanded="false" aria-controls="category">
        Category
      </button>
    </li>
    <li class="filters__list-item">
       <button class="button button--toggle" type="button" data-bs-toggle="collapse" data-bs-target="#color" aria-expanded="false" aria-controls="color">
        Color
      </button>
    </li>
   <li class="filters__list-item">
       <button class="button button--toggle" type="button" data-bs-toggle="collapse" data-bs-target="#price" aria-expanded="false" aria-controls="price">
        Price
      </button>
    </li>
  </ul>
</aside>