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 {}