What is BEM methodology?

Question

I recently heard about BEM methodology.

• What exactly is the use of BEM methodology ?
• In what way does BEM make our work easier ?
• Is it a good practice to use BEM ?

Answer 1

BEM is a naming methodology. It stands for Block Element Modifier and it's aim is to facilitate modularity and make styles and classes a lot easier to maintain.

It's not easy to explain it in a reply, but I can give you the basic idea.

So if you're thinking of a menu, then the whole element / component structure would be:

Block: menu Element: item Modifier(s): horizontal, vertical

And by following standard BEM conventions, you would write something like this in CSS:

html,
body {
  height: 100%;
}

.menu {
  display: block;
}

.menu__item {
  display: inline-block;
  line-height: 30px;
  width: 100px;
}

.menu--horizontal {
  width: 100%;
  height: 30px;
}

.menu--vertical {
  width: 100px;
  height: 100%;
}

.menu--horizontal .menu__item {
  border-right: 1px solid #e5e5e5;
  text-align: center;
}

.menu--vertical .menu__item {
  border-bottom: 1px solid #e5e5e5;
  text-align: left;
}

<div class="menu menu--horizontal">
  <div class="menu__item">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

As you see from the code, the elements are separated from the block with 2 underscores and modifiers are separated with 2 dashes.

Now if you change the modifier on the menu from --horizontal to --vertical, the specific modifier styles will be picked up for both the block and the element inside.

This should be a basic example, but it should give you an idea of how powerful this methodology is, because it allows splitting any component into these basic block-element-modifier structures, making everything a breeze to maintain.

Also writing this using a precompiler like SASS makes it even easier (I won't go into details, but to give you an idea):

.menu {
  display: block;

  &__item {
    display: inline-block;
    line-height: 30px;
    width: 100px;
  }

  &--horizontal {
    width: 100%;
    height: 30px;
  }

  &--vertical {
    width: 100px;
    height: 100%;
  }
}

It's a methodology that's scalable, so it can be used for either small projects or large projects.

It takes a bit of getting used to, so doing some research and playing with it on a small scale project would be a good starting point.

Here's a use case, if you want to see it in used in a real project https://m.alphasights.com/how-we-use-bem-to-modularise-our-css-82a0c39463b0#.2uvxts71f

Hope it helps :)

Answer 2

What is BEM?

BEM stands for Blocks, Elements and Modifiers. It's a methodology initially conceived by Russian tech company Yandex. As the same implies, BEM metholology is all about componentization of your HTML and CSS code into three types of components:

• Blocks: standalone entities that are meaningful on their own. Examples are header, container, menu, checkbox & textbox

• Elements: Part of blocks that have no standalone meaning and are semantically tied to their blocks. Examples are menu item, list item, checkbox caption & header title

• Modifiers: Flags on a block or element, used to change appearance or behavior. Examples are disabled, highlighted, checked, fixed, size big & color yellow

---

The goal of BEM is to keep optimize the readability, maintainability and flexibility of your CSS code. The way to achieve this, is to apply the following rules.

• Block styles are never dependent on other elements on a page
• Blocks should have a simple, short name and avoid _ or - characters
• When styling elements, use selectors of format blockname__elementname
• When styling modifiers, use selectors of format blockname--modifiername and blockname__elementname--modifiername
• Elements or blocks that have modifiers should inherit everything from the block or element it is modifying except the properties the modifier is supposed to modify

Code example

If you apply BEM to your form elements, your CSS selectors should look something like this:

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

The corresponding HTML should look something like this:

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>

---

Should YOU use BEM?

BEM gained quite some traction among American & Western-European web developers after having been popularized by influential CSS gurus like Harry Roberts. It is especially popular in combination with OOCSS and SMACSS (which are all really just variations on the same principles of how to write modular CSS). And modular CSS does come with quite a few advantages. However, modular CSS can be quite verbose, and BEM in particular is often considered quite ugly.

In the end, it all depends on what your code is being used for and who else will be reading and modifying your code in the future. I would definitely recommend modular CSS for any project with a large codebase and multiple maintainers, but that doesn't mean that you have to go with BEM naming conventions or strictly apply OOCSS/SMACSS principles for componentization.

If the likelyhood of your code ever being maintained by developers who already have experience with BEM/OOCSS/SMACSS is significant, you might want to pick one or more of these methodologies and be strict about their application, just because it would make collaboration with those developers a heck of a lot easier. If not, there is little advantage to strictly sticking with any of those particular conventions and you should feel free to pick your own naming conventions and your own variation on BEM/OOCSS/SMACSS. In the end, the usefulness of any standard largely depends on who is actually using it.