A BEM Cheatsheet

Sources

• BEM site
• Medium article by Ohans Emmanuel

Examples for Blocks

.stick-man {
  font-family: Roboto;
}
.hash-man {
  font-family: Hastag;
}

Examples for Elements

.stick-man__head {
  font-size: 10em;
}
.stick-man__arm {
  font-size: 4em;
}
.stick-man__leg {
  font-size: 5em;
}

Examples for Modifiers

.stick-man--red {
  color: red;
}
.stick-man--blue {
  color: blue;
}

Combining Blocks, Elements and Modifiers

Let's make a stick man with a big head and another one with a small head

.stick-man__head--big {
  font-size: large;
}
.stick-man__head--small {
  font-size: small;
}