Site Navigation

Post navigation

Basics of the BEM CSS Methodology

Posted: December 24, 2014 Updated: May 1, 2015

BEM stands for Block, Element, Modifier. It is a methodology for naming CSS classes that is clean, clear and scaleable. I’ll leave the sales pitch for implementing BEM to the links at the bottom of this post. Let’s briefly deconstruct what BEM is.

BEM Defined

Block – The “B” in BEM

A block is an independent entity, a “building block” of an application. A block can be either simple or compound (containing other blocks).

Blocks are prepended with a dot (just like any CSS class), ie: .blockname

Element – The “E” in BEM

An element is a part of a block that performs a specific function. Elements must be attached to blocks because they are context-dependent — they only make sense in the context of the block they belong to.

Elements are prepended with two underscore characters and are always attached to a block, ie: .blockname__elementname

Modifier – The “M” in BEM

A modifier is a property of a block or an element that alters its look or behavior. Modifiers may be attached to either a block or an element, and several modifiers can be used at once (though it’s not common).

Modifiers are prepended with two dash characters and may be attached to both blocks and elements, ie: .blockname--modifiername and .blockname___elementname--modifiername

BEM Best Practices

Block names must be unique

Block names must be prepended to element and modifier names to minimize cascading

Element names must be unique within the scope of a block

All styling must be done with classes

Cascading selectors should be avoided

Below is an example of BEM in action. This Sass code is from the callout module used on my site (you can see the callout module wrapping the BEM links at the bottom of this post).

Notice…

The callout block is defined by the .callout class

Several modifiers are attached directly to the block: --neutral, --primary, --success, etc.

A couple elements are defined for headings and subheadings within callout modules: __heading and __subheading