bem.md

BEM – meaning block, element, modifier – is a front-end naming methodology. CSSWizardry uses a naming scheme based on BEM, but honed by Nicolas Gallagher. The naming convention follows this pattern:

.block {}
.block__element {}
.block--modifier {}

• .block represents the higher level of an abstraction or component
• .block__element represents a descendent of .block that helps form .block as a whole
• .block--modifier represents a different state or version of .block

By reading some HTML with some classes in, you can see how – if at all – the chunks are related; something might just be a component, something might be a child, or element, of that component, and something might be a variation or modifier of that component. To use an analogy/model, think how the following things and elements are related:

.person{}
.person__hand{}
.person--female{}
.person--female__hand{}
.person__hand--left{}

Taking an example with ‘regular’ naming:

<form class="site-search full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>

These classes are farily loose, and don’t tell us much. Even though we can work it out, they’re very inexplicit. With BEM notation we would now have:

<form class="site-search site-search--full">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>

If you are familiar with OOCSS then you will no doubt be familiar with the media object. In BEM form, the media object would now read:

.media{}
.media__img{}
.media__img--rev{}
.media__body{}

From the way this CSS is written we can already glean that .media__img and .media__body must live inside .media and that .media__img--rev is a slight variation on .media__img.

---

Source