BLOCKS

A block is a container where other elements will be. A block is the root of the CSS class and will always go first, and from it, we will create the other classes. A block is independent and can work alone.

<div class="card"> test </div>
BEM Block

ELEMENT

An element is one of the pieces that the block will have. For example, following the last example, we can create a new element inside the card: the title. These elements can’t work alone (like modifiers), because they are attached to their block (their father).

BEM Element

MODIFIER

Like the name said, it’s a modifier. You can use whatever you want and modify the elements or the block directly. For example, you can have 2 different titles: red and blue. But also, you can have 2 different cards: card with red background and other with blue background.

  • card — blue
  • card__title — blue
  • card__title — bold
BEM Modifier

ADDING A BLOCK INSIDE ANOTHER BLOCK

Is this possible? Of course! Remember that a block is an independent component, but you can create other components and add them inside others blocks.

<ul class="checklist">  <li class="checklist__item"> Text </li>  <li class="checklist__item--green"> Text </li>  <li class="checklist__item"> Text </li>  <li class="checklist__item"> Text </li></ul>
<div class="card">

<h3 class="card__title card__title--blue card__title--bold">
Title
</h3>
<ul class="checklist"> <li class="checklist__item"> Text </li> <li class="checklist__item checklist__item--green"> Text </li> <li class="checklist__item"> Text </li> <li class="checklist__item"> Text </li> </ul></div>

Advantages and disadvantages

Advantages

  • Better CSS performance because you don’t need to use nested selectors. So the less browsers have to evaluate, the faster they can render.
  • Easy and clear naming.
  • Ease of code maintenance: having independent modules of code and hence easier to maintain and update without affecting other modules.
  • Improves multiple inheritance: You can change any of the three elements (block, module or modifier) without affecting the others.
  • Names can be very large and file sizes may grow. (Although you can minify production code).
  • Ugly code: code can look nasty with these classes names.

Junior frontend developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store