How to use BEM

#css #webdev

You may have heard of a CSS technique called BEM. It stands for Block Element Modifier, and that is just a naming convention for your CSS elements. Naming conventions are needed for just about every single identifier in every language because they establish a commonly agreed-on interpretation for a particular pattern of characters. Naming conventions are present from the case of your variable names in programming languages to names given to keys and their children of a JSON or XML document.

BEM is an extraordinarily simple naming convention because is only has three kinds of names: blocks, elements, and modifiers. I would like to explain the meaning BEM gives to each of these terms before talking about how they are written in code.

I like to view Block as a unit of HTML that can be displayed by itself on a blank page without other supporting classes. For example, a modal dialog you design can be considered a block.

As for Element, that is a child of a block, which theoretically can be displayed on its own but not without losing the semantic design of your block/ If you display a yes button without its modal dialog then you are no longer displaying a modal dialog.

A Modifier is a CSS class which changes the CSS properties of blocks and elements but cannot be displayed by itself, because it only exists as a CSS class. A Modifier would be like creating a blue border when you hover over the yes button.

The naming convention itself

Tag names and IDs are frowned upon in BEM and aren't used in naming, instead class names are used exclusively.

For a block, the selector is a single class name such as .block { color: #042; }.

For an element, we put the name of the block selector, followed by two underscores, and then the element selector name: .block__elem { color: #042; } You can also style elements that are under a node with a specific modifier using .block--mod .block__elem { }. This will style all block__elem elements under a node that has the block--mod class.

A modifier for a block has the block selector name, followed by two dashes and then the modifier selector name, and looks like this .block--hidden { }. An element modifier looks the same but with the block name replaced with the element name: .block__elem--mod { }

Concrete example

Suppose we have the following CSS:

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

The form selector is a block, an HTML form, input and submit are elements, which are buttons, and theme-xmas, simple and disabled are the modifiers. The element and modifier names begin with the block name in the CSS, but only because this is required CSS syntax. In other words, in user interface diagrams you wouldn't label the elements and modifiers with form__ or form-- at the beginning.