The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Its goal is to help developers better understand the relationship between the HTML and CSS in a given project.

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: menu item, list item, checkbox caption, header title

Modifier

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

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

Here’s an example:

See the Pen BEM 101 by Divya (@DivyaPatel) on CodePen.

Benefits

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

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

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