Block encapsulates a standalone entity that is meaningful on its own.
While blocks can be nested and interact with each other, semantically they remain equal; there is no precedence or hierarchy.
Holistic entities without DOM representation (such as controllers or models) can be blocks as well.
Block name may consist of Latin letters, digits, and dashes.
To form a CSS class, add short prefix for namespacing: .b-block
We use b- as a class name prefix; you can choose your own, or go without any prefixes at all.
Any DOM node can be a block if it accepts a class name.
<div class="b-block">...</div>
- Use class name selector only
- No tag names or id's
- No dependency on other blocks/elements on a page
.b-block { color: #042 }
Elements are parts of a block and have no standalone meaning. Any element is semantically tied to its block.
Any DOM node within a block can be an element. Within a given block, all elements are semantically equal.
Element name may consist of Latin letters, digits, and dashes.
CSS class is formed as block name + two undercores + element name: .b-block__elem
<div class="b-block">
...
<span class="b-block__elem"></span>
</div>
- Use class name selector only
- No tag name or id's
- No dependency on other blocks/elements on a page
/* BAD */ .b-block .b-block__elem { border: solid 1px #000 }
/* BAD */ div.b-block__elem { border: solid 1px #000 }
/* GOOD */ .b-block__elem { border: solid 1px #000 }
Modifiers are flags on blocks or elements. Use them to change appearance or behavior.
Modifier is an extra class name which you add to a block/element DOM node.
Modifiers (both keys and values) may consist of Latin letters, digits, and dashes.
Modifier can be a boolean flag or a key/value pair. Naming conventions:
- Boolean modifiers:
Original block/element name + single underscore + mod name
.b-block_mod or .b-block__elem_mod - Key/value modifiers:
Original block/element name + single underscore + mod key name + single underscore + mod value
.b-block_key_value or .b-block__elem_key_value
Add modifier classes only to blocks/elements they modify, and keep the original class:
GOOD <div class="b-block b-block_mod">...</div>
GOOD <div class="b-block b-block_size_big b-block_shadow_yes">...</div>
BAD <div class="b-block_mod">...</div>
Modifiers don't have formal hierarchy, but when they co-exist on a single node, CSS rules will be resolved according to CSS specificity.
Use modifier class name as selector:
.b-block_hidden { display: none }
To alter elements based on a block-level modifier:
.b-block_mod .b-block__elem { display: none }
Element modifier:
.b-block__elem_mod { display: none }