The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.

Block

Encapsulates a standalone entity that is meaningful on its own.

Element

Parts of a block and have no standalone meaning.

Modifier

Flags on blocks or elements.

Example

HTML

<form class="form form--theme-xmas form--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 { }

Source

Based entirely on http://getbem.com/naming/