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.