The Block, Element, Modifier (BEM) methodology is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project. Here’s how it works:
Block: A top-level abstraction of a new component (e.g., a button). It acts as a parent and is represented by a class like
.btn.Element: Child items placed inside the block. They are denoted by two underscores following the block’s name (e.g.,
.btn__price).Modifier: Changes the style of the block without affecting unrelated modules. Modifiers are appended with two hyphens (e.g.,
.btn--orange).
By following BEM, developers can create reusable components, easily see existing modifiers and children, and maintain consistent naming for better communication within the team.
References:
- https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/
- https://css-tricks.com/bem-101/
- https://en.wikipedia.org/wiki/CSS