BEM — Blocks, Elements and Modifiers


/* This is a Block */ 
.container {}
/* This is an element that depends upon the block */ 
.container__btn {}
/* And those are modifiers that changes the style of the block */ 
.container — rounded {} 
.container— transparent {}
/* (
There difference lies on double dashes and double underscores) */

BEM is a CSS methodology being widely. The general idea is to separate CSS data in three different (but connected) parts: (B)locks, (E)lements and (M)odifiers.

BEM Blocks?

Think of it as parents. A parent is a top-level abstraction of a new component, for example a button or a div container.

.container {

BEM Elements?

Childs! Every element inside a BEM Block is a child. To ensure that relationship between parent and child, double underscores are added between them.

.container__btn { 
text-transform: uppercase;
color: #696969;
border: 1px solid #696969;
background: transparent;
padding: 5px 10px;
border-radius: 5px;

BEM Modifiers

A modifier is a thing that makes partial or minor changes to something. Just like the relationship between the blocks and elements, there’s an special way to represent the modifiers: double dashes between the block and the modifier.

.container--rotated { 
transform: rotate(180deg);

Useful links: