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>