CSS-Naming-Conventions--BEM

BEM

BEM : Block Element Modifier

There are only two hard problems in Computer Sciences:cache invalidation and naming things --Phil Carlton

Block

Short prefix of namespacing. such as .block

Naming:

Consist of Latin letters,digits and dashes. To form a CSS class,add a short prefix for namespace.

HTML

<div class="block">....</div>

CSS

.block {
    color:red;
}

Element

A block name plus two underscore plus element name

Naming

.block__element

HTML

<div class="block">
<span class="block__element"> </span>
</div>

CSS

.block__element {
    color:red;
}

Modifier

Block`s or element`s name plus two dashes. .block--mod .block__element--mod

Naming

.block--mod
.block__element--mod

HTML

<div class="block block--mod">
    <span class="block__element block__element--mod"></span>
</div>

CSS

• Use modifier class name as selector

.block--mod {

}

• To alter elements based on a block-level modifier

.block--mod .block__mod {

}

• Element modifier

.block__element--mod {

}

Examples

HTML

<form class="form form--theme-xmas for--simple">
    <input class="form__input" type="text"/>
    <input class="form__submit form__submit--disabled" type="submit"/>
</form>

CSS

.form {}
.form--theme--xmas {}
.form--simple {}
.form__input {}
.form__submit {}
.form__submit--disabled {}

Reference

Get BEM

Standard BEM Style