Block

The block is the container or context where the elements are situated. It should be able to stand alone and still make sense in the overall structure of your code. A typical layout often includes a header, sidebar, main content area & footer, each of these would be considered blocks:

So blocks are standalone elements that form the root of your code structure, in this example we have .header, .sidebar, .main and .footer . They have no dependencies on any other blocks/elements on the page.

Contained within each block are elements..

Element

Elements are parts of a block which have no semantic meaning outside of the block. As each element is semantically tied to its block. The syntax is as follows:

.block__element{}

Elements are written using the block name, connected by two underscores.

So for example, our header might contain a logo, nav bar, and search box. These element classes would be named as follows:

.header__logo{}

.header__navbar{}

.header__searchbox{}

Already you can see the beginnings of a more readable code structure. The importance of convention increases dramatically when working on larger projects, especially when working collaboratively.

Modifiers

A modifier is a flag on a block or an element which is used to change appearance, behavior or state. It’s where the one of the great strengths of BEM shines through; modularity. By using modifiers, you can extend a block or element to make it repeatable. This is a big win as it facilitates code reuse and component driven coding. The syntax is like so:

.block--modifier{}

.block__element--modifier{}