Skip to content

Instantly share code, notes, and snippets.

@twome twome/ forked from dmfrancisco/
Created Apr 15, 2013

What would you like to do?

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:


Taking an example with ‘regular’ naming:

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

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">

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:


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.


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.