Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
TL;DR · Getting your head around BEM syntax

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.



This comment has been minimized.

Copy link

commented Apr 15, 2013

Thanks for the clean reference

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.