gistfile1.md

BEM Cheatsheet

BLOCK

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.

Naming

Block name may consist of Latin letters, digits, and dashes.

To form a CSS class, add short prefix for namespacing: .b-block

Note on naming prefixes

We use b- as a class name prefix; you can choose your own, or go without any prefixes at all.

HTML

Any DOM node can be a block if it accepts a class name.

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

CSS for blocks

• Use class name selector only
• No tag names or id's
• No dependency on other blocks/elements on a page

.b-block { color: #042 }

ELEMENT

Elements are parts of a block and have no standalone meaning. Any element is semantically tied to its block.

HTML

Any DOM node within a block can be an element. Within a given block, all elements are semantically equal.

Naming

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>

CSS for elements

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

MODIFIER

Modifiers are flags on blocks or elements. Use them to change appearance or behavior.

HTML

Modifier is an extra class name which you add to a block/element DOM node.

Naming

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.

CSS for modifiers

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 }