Building Scalable and Maintainable CSS with BEM Naming Convention

BEM (Block Element Modifier) is a naming convention for CSS classes that helps developers create scalable and reusable styles. It emphasizes the importance of clear and consistent naming conventions for HTML classes and uses a hierarchical approach to class naming that reflects the relationships between different elements on a page.

BEM is a popular naming convention for CSS classes that aims to make it easier to understand the structure and purpose of different elements on a web page. It was created by the developers at Yandex, a Russian search engine company, and has since been widely adopted by web developers around the world.

The basic idea behind BEM is to use descriptive class names that indicate the purpose and context of different elements on a web page. This makes it easier to write and maintain CSS code, and also helps to avoid naming conflicts and unintended side effects.

How to use BEM?

To use BEM, you'll need to follow a few simple rules when naming your CSS classes:

1. Block: The main component or "block" of the page. Use a descriptive name for the block, such as "header" or "menu". Block names should be unique and not include any elements or modifiers.
2. Example:

.header {}         

1. Element: A sub-component or "element" within the block. Use a double underscore (__) to separate the block name from the element name. Element names should be descriptive and indicate their purpose within the block.
2. Example:

.header__logo {}         

1. Modifier: A variation or "modifier" of the block or element. Use a double hyphen (--) to separate the element or block name from the modifier name. Modifiers can be used to change the appearance, behavior, or state of an element or block.
2. Example:

.header__logo--large {}         

Putting it all together, a BEM class name might look like this:

.block__element--modifier {}         

Why use BEM?

BEM has several benefits that make it a popular choice for web developers:

1. Clear and descriptive: BEM class names are designed to be easy to read and understand, even for someone who is not familiar with the codebase. This makes it easier to collaborate with other developers and maintain code over time.
2. Avoid naming conflicts: BEM classes are structured in a way that makes it unlikely for two classes to have the same name. This helps to avoid naming conflicts and unintended side effects.
3. Modular and reusable: BEM encourages modular, reusable code that can be easily adapted to different contexts and use cases.

Example

Let's say you have a web page with a header that contains a logo and a navigation menu. Here's how you might use BEM to name the CSS classes for this page:

<header class="header"
? <a href="/" class="header__logo">My Site</a>
? <nav class="header__nav">
? ? <ul class="header__menu">
? ? ? <li class="header__menu-item"><a href="/">Home</a></li>
? ? ? <li class="header__menu-item"><a href="/about">About</a></li>
? ? ? <li class="header__menu-item"><a href="/contact">Contact</a></li>
? ? </ul>
? </nav>
</header>        

In this example, we have a header section with a logo and a navigation menu. Each element is given a BEM class name to indicate its purpose and context within the page.

• header: This is the main block for the header section. It contains all the other elements within it.
• header__logo: This is an element within the header block. It represents the logo for the website.
• header__nav: This is another element within the header block. It represents the navigation bar.
• header__menu: This is an element within the navigation bar. It represents the menu list.
• header__menu-item: This is an element within the menu list. It represents each individual item in the menu.

.header 
? background-color: #fff;
? height: 80px;
? display: flex;
? justify-content: space-between;
? align-items: center;
}


.header__logo {
? font-size: 24px;
? font-weight: bold;
? color: #333;
? text-decoration: none;
}


.header__nav {
? margin-left: auto;
}


.header__menu {
? list-style: none;
? display: flex;
}


.header__menu-item {
? margin-right: 16px;
}


.header__menu-item:last-child {
? margin-right: 0;
}
        

In the CSS code, we use the BEM class names to style each element according to its purpose and context within the page.

• .header: We set the background color, height, display mode, and alignment of the header block.
• .header__logo: We set the font size, weight, color, and text decoration of the logo element.
• .header__nav: We use margin-left: auto to push the navigation bar element to the right side of the header block.
• .header__menu: We use list-style: none to remove the default bullet points from the menu list, and display: flex to make the list items display horizontally.
• .header__menu-item: We set the margin-right of each menu item to create spacing between them. We also use :last-child pseudo-class to remove the margin-right from the last menu item.

In the example provided, we see how BEM class names can be used to structure a header section with a logo and navigation menu, and how these class names can be used to write clear and targeted CSS styles. The BEM class names in this example include header, header__logo, header__nav, header__menu, and header__menu-item. These class names reflect the hierarchical relationship between different elements within the header section.

By using BEM class names, developers can more easily understand the purpose and context of different elements on a page, and can write more targeted CSS styles that are less likely to conflict with other styles on the page. This can result in more maintainable, scalable, and reusable code that is easier to work with over time.