BEM Styleguide

BEM Methodology

BEM stands for Blocks, Elements and Modifiers. This methodology stands to show how the html and css of a product is structured and maintained. This makes it easier to understand the application and layout better. BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting. It aims to achieve modularity by splitting the UI into blocks and modifiers. Discussed below are the individual components of the BEM model

Block

The block represents an independent reusable element which defines the purpose of that element. The block answers the question, ‘What is it?’. Hence, when an element is considered, the block defines if that element is a button or menu or navigation or dropdown. Below is an example of a block name:

<form class="search-form"></form>

It should be noted that you can have a block inside another block. Here is an example:

<header class="header">
    <form class="search-form"></form>
</header>

Element

This represents a composite part of the block that cannot be used separately. A simple scenario is that a button class can have a text inside it, hence could be described as button-text. The element answers the question, ‘What is this?’. Thus it could be an item or a text. The structure of an element's full name is:

block-name__element-name

The element name is separated from the block name with a double underscore (__). Below is a good example of the element:

<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

Modifier

This describes the appearance of the element or block. It answers the question, ‘What does this look like?’ and ‘How does this act?’. The structure of the modifier's full name follows the pattern:

block-name_modifier-name_modifier-value

block-name__element-name_modifier-name_modifier-value

The modifier name is separated from the block or element name by a single underscore (_). Find examples of the modifier below:

<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button search-form__button_disabled">
	Search
    </button>
</form>

Points worth noting with the modifier:

You can give a modifier a name and value both separated with an underscore(_)

This is shown below:

<div class=”search-form__button search-form__button_width_medium”></div>

This is referred to as the key value pair of modifiers

A modifier cannot be used without the modified block or element beside it.

Wrong Implementation

<div class=”search-form__button_width_medium”></div>

Right Implementation

<div class=”search-form__button search-form__button_width_medium”></div> 

Why BEM?

BEM provides solutions for all the frontend technologies: CSS, JavaScript, templating; and also for building process of your web application. The methodology is applicable anywhere. However, to apply this in JavaScript and templating you would need special frameworks whereas in CSS you may just follow the methodological recommendations. The CSS part of BEM is the easiest to take into your development process. This is why many use only it. BEM CSS will be easier to coordinate with modular JavaScript and blocks-based project file structure. BEM CSS unambiguously defines which CSS belongs to a piece of interface and this makes it easier to know which part of the code to remove and what it does.