Understanding BEM

Jonathan Garbee edited this page Jun 8, 2015 · 2 revisions

BEM stands for Block, Element, Modifier. It is a method used to construct CSS class-names so they are consistent, isolated, and expressive. A few good resources for learning more about BEM methods are:

These are great resources that simplify the data needed to understand BEM. If you want to read the methodology from the inventors, Yandex provides the resource. This holds no bars and goes way beyond just the CSS and into the full JavaScript setup they use as well.


Project classnames should follow these guidelines:

  1. Start each classname developers use with mdl-. This provides a solid namespace of any provided classes so they have the least chance to collide with other projects.
  2. Take the name of the component, convert to lowercase and hyphenate. For example: Data Tables becomes data-tables. This becomes your block.
  3. Break the element down into logical pieces. Typically this can be done by looking at the specification and seeing how it breaks parts down.
  4. Once parts are settled, name them as closely as you can to how the specification names them. These become your elements.
  5. Finally, add any modifiers where the specification allows multiple forms of an item.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.