One of the most popular and hardest programming dilema of all is … naming things. The search for a concise and meaningful name is a well rewarded one. Code maintenance and redeability pays it off ! In CSS, adopting a particular naming convention helps with your code beyond yourself when someone else has to handle.

BEM – The Basics

B E M  stands for Block, Element, Modifier. As the name tells, it classifies classes into 3


The BEM website defines Block as

Standalone entity that is meaningful on its own.

It can be menu, header, footer whatever is the thing itself.

usage :



It refers to attached entities

A part of a block that has no standalone meaning and is semantically tied to its block

usage :





refers to an state like happy sad disabled

A flag on a block or element. Use them to change appearance or behavior.

usage :



Benefits of BEM


Contents are compartmentalised and as clashes occur not, no worry about an elemnt from after nullifying one from before.


Since classes are block based, they can be reused for another block !


Your CSS is structured … simply !