Bems

BEM's stands for block/element/modifier and is a front-end naming methodology. You can read more about the whys, the wheres and the whens on CSS Wizardy (a lot of this page is lifted from, or referencing this article). All you need to know right now is we like to write markup in this manner wherever possible, based on a few simple rule sets.

During design and development phases, this guide is best viewed in Google chrome as it is still a working document.

Naming conventions

.element {}
.element__child {}
.element--modifier {}

The basics

  • .element represents the higher level of an abstraction or component.
  • .element__child represents a direct child of '.element'.
  • .element--modifier represents a different state or version of '.element'.

A simple example

<article class="article">
	<header class="article__header"></header>
	<div class="article__body"></div>
	<footer class="article__footer"></footer>
</article>
.article {
	background: #333;
}
.article__header {
	background: #000;
}
.article__footer {
	background: #fff;
}

Simple example

Here we see a simple article structure with a header, body and footer. The represents the simplest approach to BEM's mark–up.

Keeping your nest(ing) tidy

<section class="section">
	<article class="article">
		<header class="article__header"></header>
		<div class="article__body"></div>
		<footer class="article__footer"></footer>
	</article>
</section>

Why no double nest?

Logically, the '.article' is a direct child of '.section', so BEM's would suggest it should use child markup.

However, there maybe times where '.article' is not a child of '.section', so specifying in this manner makes things, less, not more flexible

Best approach? Plan your modules, and decide what is a child and what isn't

Modifiers

<section class="section section--alternate">
	<article class="article">
		<header class="article__header"></header>
		<div class="article__body"></div>
		<footer class="article__footer"></footer>
	</article>
</section>
.section {
	background: #333;
	padding: 40px;
	overflow: hidden;
}
.section--alternate {
	background: #fff;
}

Using modifiers

A modifier is use to changed the properties of '.section' from their default. It might change a background color, increase padding or changes margins.

Modifiers are used where a change of some properties is desired, but some of the original properties remain.

Remember, you can use modifiers to change child elements too, but be careful with how far down this road you go, as you can create too many dependencies.