BEM (Block Element Modifier) is a naming convention for class names in HTML and CSS. It 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.

Contact

Feel free to reach out with a member of our team! We are excited to begin our collaboration!
Alex Osmichenko
Alex Osmichenko
CEO, Founder
Dima Osmichenko
Dima Osmichenko
COO
Clutch Logo
Reviewed on Clutch

Send a Project Brief

Fill out and send a form. Our Advisor Team will contact you promptly!

    Note: We will not spam you and your contact information will not be shared.