BEM

Block

A logically and functionally independent page component, the equivalent of a component in Web Components. A block encapsulates behaviour (JavaScript), templates, styles (CSS), and other implementation technologies described below.

Blocks can be implemented in one or more technologies, for example:

• Behavior — JavaScript, CoffeeScript, TypeScript
• Appearance - CSS, Stylus, Sass, Less
• Templates — BEMHTML, BH, Jade, Handlebars, XSL
• Documentation - Markdown, Wiki, XML

Block Features

Blocks consists of the following features:

• Nested - Blocks can be nested inside any other blocks
• Arbitrary placement - Blocks can be moved around on a page, moved between pages or projects
• Re-use - An interface can contain multiple instances of the same block

Nested structure

Block can be nested inside any other blocks.

Element

A constituent part of a block that can't be used outside of it. For example, a menu item is not used outside of the context of a menu block, therefore it is an element.

Modifier

A BEM entity that defines the appearance and behaviour of a block or an element.

The use of modifiers is optional.

Modifiers are similar in essence to HTML attributes. The same block looks different due to the use of a modifier.

For instance, the appearance of the menu block (menu) may change depending on a modifier that is used on it.

Naming Convension

The naming convention follows this pattern:

.block {
}
.block__element {
}
.block--modifier {
}

As you can notice, the element (__) differs from modifier (--), where element uses underscores and modifier use hyphens.

These self-describing styles help developers and designers to identify and understand the structure they are building.

Let's look at an example to understand this concept further.

.vehicle {
}
.vehicle__door {
}
.vehicle--car {
}
.vehicle--car__door {
}
.vehicle__door--left {
}

The top-level block is vehicle which has elements for example door. A vehicle also has variation, like car. And that variation in turn has elements such as door.

Conclusion

BEM may seem ugly, and weird. But it's a powerful naming convention for the front-end developer.