BEM methodology in HTML and CSS

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:

1. 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.

2. Element: Child items placed inside the block. They are denoted by two underscores following the block’s name (e.g., .btn__price).

3. 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:

1. https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/
2. https://css-tricks.com/bem-101/
3. https://en.wikipedia.org/wiki/CSS