BEM – Block Element Modifier Naming

---

Problem:

There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton

Solution:

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development.

BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using BEM’s proper naming convention will better prepare you for design changes made to your website.

---

Benefits:

Modularity

Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.

You also get the ability to transfer blocks from your finished projects to new ones.

Reusability

Composing independent blocks in different ways, and reusing them intelligently, reduces the amount of CSS code that you will have to maintain.

With a set of style guidelines in place, you can build a library of blocks, making your CSS super effective.

Structure

BEM methodology gives your CSS code a solid structure that remains simple and easy to understand.

---

Features:

Easy

To use BEM, you only need to employ BEM’s naming convention.

Modular

Independent blocks and CSS selectors make your code reusable and modular.

Flexible

Using BEM, methodologies and tools can be recomposed and configured the way you like.

Blocks, Elements and Modifiers

Block

Standalone entity that is meaningful on its own.

Examples

header, container, menu, checkbox, input

---

Element

A part of a block that has no standalone meaning and is semantically tied to its block.

Examples

disabled, highlighted, checked, fixed, size big, color yellow

Modifier

A flag on a block or element. Use them to change appearance or behavior.

Examples

disabled, highlighted, checked, fixed, size big, color yellow

Why BEM over the others?

The reason I choose BEM over other methodologies comes down to this: it is less confusing than the other methods (i.e. SMACSS) but still provides us the good architecture we want (i.e. OOCSS) and with a recognizable terminology.

Example

---

HTML

<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

CSS

.button {
	display: inline-block;
	border-radius: 3px;
	padding: 7px 12px;
	border: 1px solid #D5D5D5;
	background-image: linear-gradient(#EEE, #DDD);
	font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
	color: #FFF;
	background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
	border-color: #4A993E;
}
.button--state-danger {
	color: #900;
}

Learn how to name – http://getbem.com/naming/

Reference & Credits – http://getbem.com/