BEM

Block Element Modifier is a methodology that helps to create reusable and maintainable code by breaking down the components of a webpage into smaller, modular pieces.

The naming convention uses three parts to identify a specific component: the block, the element, and the modifier. The block represents the highest abstraction level and the component as a whole. The element is a child component of the block and represents a specific part. The modifier indicates a particular variation of the block or element.

The naming convention uses double underscores (__) to separate the block and element, and a single dash (-) to separate the aspect and the modifier.

For example, if we have a button component, the block name would be “button”, and if we have a button with an icon, the element name would be “icon”, the class name would be “button__icon”, if the icon is disabled, the modifier name would be “disabled”, the class name would be “button__icon–disabled”.

BEM naming convention helps to create a clear and consistent naming structure, making it easy to understand the design of the code and how the different parts of the webpage are related. It also helps to avoid naming conflicts and makes it easier to update and maintain the code.

Frontend developers and designers widely use it because it makes it easy to understand a web page’s structure and identify which classes are used for what and how they can be reused.