BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.
The BEM approach ensures that all those who participate in the development of new features for a website are able to work within a single codebase by leveraging the same naming language. Using the appropriate and proper naming ensures you are prepared for any potential changes and able to effectively make updates.
Encapsulates a standalone entity that is meaningful on its own. While blocks may have the propensity to interact with other blocks, they semantically remain equal. Likewise, the concept of a precedence or hierarchy does not exist.
Block names consist of Latin letters, digits, dashes to form a css class. Therefore, any element that has a class name can be a block.
<div class="block">...</div>
Parts of a block and have no intrinsic meaning by themselves. These are tied to its ancestor block.
Element names consist of Latin letters, digits, dashes, and underscores. Classes that are used leverage two underscores in addition to the element name. Any node within a block can be an element. All elements are semantically equal.
<div class="block">
...
<span class="block__element"></span>
</div>
Names and flags on either blocks or elements. These names are used to adjust the styling for that particular element. It marks a change in behavior or state.
Modifier names consist of Latin letters, digits, dashes, and underscores. CSS class is formed as a block's or element's name plus two dashes.
This is an extra class name that you append to the HTML. Maintain the original class and if you need to modify the class, add the modifier class.
<div class="block block--wide">
...
<div class="block__element block__element--size-small"></div>
</div>