A BEM Cheatsheet

Sources

1
2
3
4
5
6


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

1
2
3
4
5
6
7
8
9


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

1
2
3
4
5
6


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

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

1
2
3
4
5
6


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