Front end development and BEM

Over the past few months, I have been looking at using a new methodology for our front end development.

Eventually, I decided we would use BEM (Block, Element, Modifier) for front end development, and we have been using it on a few of our latest projects that are due for release in the near future.

I chose BEM for some very good reasons, but let us first find out a little bit more about this methodology.

What is BEM?

BEM stands for Block, Element, Modifier and you can find out all about BEM here.

It is already quite popular on the web, with some big names adopting it for its own methodology of front end development.

We are using a variation of BEM to suit our needs, but essentially the BEM methodology gives meaning and structure to HTML and CSS.

BEM is, in some respects, similar to object-oriented programming (OOP). It is a method of describing "reality in code, a range of patterns, and a way of thinking about program entities".

Blocks

Blocks are parts of a website, including headers, logos, search boxes, tabs, navigation, and more. A block is represented using single dash (-) naming, such as:

.search-block

<div class="search-block"></div>

Elements

Elements are parts of blocks. In terms of a search box, the elements could be a text input and the button. An element is represented using double underscore (__) naming, after the name of the parent block, such as:

.search-block__input

<input type="search" class="search-block__input" placeholder="Search..." />

Modifiers

Modifiers alter the look, layout or behaviour of an element or block. In terms of a search box, the modifier could change the block to have a different background and border, or change the elements to be inline instead of stacked.

A modifier is represented using double dash (--) naming, with the block or element prefix, such as:

.search-block--alt

<div class="search-block search-block--alt"></div>

An example of BEM

Below is an example of a search box, combining our block, elements and a modifier. In this example, we have modified the search box itself and we have two child elements of the block (an input and a button):

<div class="search-block search-block--alt">

  <input type="search" class="search-block__input" placeholder="Search..." />

  <button class="search-block__button search-block__button--red">Find</button>

</div>

Why use BEM?

There are many reason for choosing to use BEM. I eventually narrowed it down to the following reasons:

1. Standards:
   The BEM documentation and standards are easy to find, follow and understand - this means that new developers or freelancers can quickly get to grips with understanding the code that has previously been written;
2. Simplicity:
   Each block, element and modifier is simple to read - it is named after what it is or does, so understanding the code should be quicker;
3. Works with SCSS:
   We are using SCSS for our CSS and BEM works very easily with this, making CSS writing simple and smooth.

BEM cons

There are some cons of using BEM, but they are outweighed by pros:

1. Long CSS class names:
   As a result of BEM being explicitly readable, it can introduce quite long CSS class names. At first glance, these can be seen as long and daunting names;
2. Miscellaneous CSS class names:
   Some CSS class names do not merit inheriting the BEM methodology, like helpers or transforms that are commonly used (text transformation, alignment etc.). As such, these classes don't follow the BEM structure and will differ between projects unless documented.