Maintain CSS/SCSS properly using Block Element Modifier (BEM) convention

Block Element Modifier (BEM) is a naming convention for classes in CSS. It is a method for naming CSS classes in a way that makes it easy to understand the relationship between HTML and CSS in a project. It is often used in front-end web developments.

Intro

While working on some CSS work last week, I noticed some unfamiliar symbols are used in CSS files in my current project. I am a bit confused, and I asked our UI Engineer about this. He said it is a naming convention called "BEM". OH! BEM? What is BEM?

Why do you want a proper CSS naming convention?

Class naming has always been a challenging part of CSS. Understanding the functions of developer-specified classes can be difficult for outside developers. When working with a team and repeatedly reworking code, naming conventions can easily spiral out of control. The below cases are the most problematic.

• Overriding classes accidentally.
• Hard to read both CSS and HTML has no clear scoping and structure in naming.
• New team members waste time learning about or trying to find already created classes.
• It's unclear how to handle nesting.

How can we avoid this headache problem? Is these suitable naming conventions? YES. BEM will help you to manage your CSS classes properly and well maintained.

What is BEM (Block Element Modifier)

Block Element Modifier (BEM) is a naming convention for classes in CSS. It is a method for naming CSS classes in a way that makes it easy to understand the relationship between HTML and CSS in a project.

There are three main parts of BEM.

1. Block: which holds everything (elements) inside and acts as a scope.

.card {} and .button{}

2. Element: which acts as a specific part of the component.

.card__title{}, .card__description{}, .card__image{} ...

3. Modifier: which adds additional styles to a specific element(s).

.card__buttons--primary{}, .card__buttons--secondery{}, .card__buttons--disabled{} ...

The block represents a high-level component, such as a "card" or a "button." The element represents a part of the block, such as the "card title" or "card button" on a card. The modifier represents a variation on the block or element, such as a "primary button" or a "large button."

Benefits of using BEM

Using BEM you can address most of the above CSS-level naming problems to some extent. Some benefits of using BEM include:

• Improved code readability and maintainability: By using strict naming conventions and clear rules for defining blocks, elements, and modifiers, BEM makes it easier for developers to understand and work with CSS code.
• Reusability and modularity: Because BEM blocks are standalone entities that can be used in multiple contexts, it's easy to reuse them on different pages or in different projects. This can save time and make it easier to build and maintain complex, scalable websites.
• Consistency and predictability: By using BEM, you can create a consistent, predictable system for naming and organizing your CSS classes. This can make it easier to work on a project as a team and can also make it easier to learn and understand the codebase.

Example

Here I am going to develop a card using a BEM naming convention.

According to the defined class names, I developed a sample in codepen below

Throughs

Overall, BEM is a valuable tool for organizing CSS classes, and it can be especially useful for large, complex projects. However, it's not the only approach, and it's not necessarily the best fit for every project. It's up to you to decide whether BEM is the right choice for your specific needs.

References

1. Documentation

BEM — Introduction

Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

Vsevolod Strukchinsky, Vladimir Starkov and contributors

2. BEM Visually Explained 🌟 (recomonded)

BEM Visually Explained

BEM (Block, Element, Modifier) methodology for naming CSS styles explained with visual examples

Keeping Up To Date