What is BEM Framework?

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

From the definition provided by getbem, BEM is derived from 3 words, Block, Element and Modifier. BEM is a powerful framework that allows us to write a much neater and more concise code while at the same time, works really well with CSS-pre-processors such as SCSS or SASS.

Throughout my projects, I have started integrating BEM inside as it's very easy and provides a much more readable naming scheme when I start building more portfolios these days. If the name doesn't give it away straight away (don't worry, I didn't know at first as well), is a better way that allows us to see which section belongs to which you can think of it as a single line of thread splitting into child threads.

Example snippet of BEM in NuxtJS

<template>
  <div class="innerBody">
    <div class="innerBody__headNav">
      <navbar />
      <sidebar />
    </div>

    <section class="innerBody__content">
      <nuxt />
    </section>

    <div class="innerBody__footNav">
      <footbar />
    </div>
  </div>
</template>

Example snippet of BEM in SCSS

.innerBody {
  margin: 0 auto;

  display: grid;
  grid-template-rows: 80px auto 80px;
  grid-template-areas:
    "navbar"
    "content"
    "footer";

  &__headNav {
    grid-area: navbar;
  }

  &__footNav {
    grid-area: footer;
  }

  &__content {
    grid-area: content;
  }
}

Snippets provided above is an example that I would often use in my VueJS projects. Notice the innerBody how its child below are called as innerBody__headNav, innerBody__content and innerBody__footer respectively. Normally, we would give it a different name such as navbar, content and footer but with BEM, this allows to see clearly which one belongs to which. With the power of SCSS, this also opens up the opportunity for us to use in its main style class and notice how to import the child we call &__ in front to be use with BEM scheming.

Ending note

When BEM is used with SCSS, it allows a much simpler class structure instead of needing to create each individual class which looks messy.