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

  1. 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

  2. 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

  3. 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
// -----------------------------
// ---------- CALLOUT ----------
// -----------------------------

// ------------
// PLACEHOLDERS
// ------------

%callout {
	position: relative;
	padding: 0.75rem 1rem;
	margin-bottom: 1.5rem;
	&[data-icon] {
		margin-top: $margin--section;
		&::before {
			@include icon--circle($brown--dark, block);
			margin: -1.944em auto -0.337em auto;
		}
	& + %callout[data-icon] {
			margin-top: $margin--section * 2;
		}
	}
}

// ------
// STYLES
// ------

.callout--neutral {
	@extend %callout;
	background-color: $off-white;
}
.callout--primary {
	@extend %callout;
	background-color: $blue--light;
}
.callout--success {
	@extend %callout;
	background-color: $green--light;
}
.callout--warning {
	@extend %callout;
	background-color: $orange--light;
}
.callout--danger {
	@extend %callout;
	background-color: $red--light;
}

.callout__heading {
	font-size: $font-size--h2;
	font-family: $sans-serif--alt;
	text-align: center;
	text-transform: lowercase;
	margin: $margin--small 0;
}
.callout__subheading {
	@include caption(-0.675em, $margin--block, $text-color--disclaimer);
	text-align: center;
}
Posted by: John Dugan

Comments