Talk to an expert
We have a team of specialists available to help you find the best solution for your business.
+1 646 941 7882

    Request a call

    Get a Quote
    Menu Close

    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.


    Feel free to reach out! We are excited to begin our collaboration!
    Business Consultant
    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.