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

Block

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 :

.boy

Element

It refers to attached entities

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

usage :

.boy__leg

.boy__arm

 

Modifier

refers to an state like happy sad disabled

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

usage :

.boy–active

.boy–iron-health

Benefits of BEM

Modularity

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

Reusability

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

Structure

Your CSS is structured … simply !

Advertisements