Building Better Software with BEM: An Introduction to the Methodology

Introduction

In the world of software development, maintaining clean, efficient, and scalable code is crucial for success. When it comes to front-end web development, one popular methodology that addresses these challenges is BEM – Block, Element, Modifier. BEM is not just another buzzword; it’s a powerful approach that helps developers create robust and maintainable user interface (UI) components. In this blog, we’ll explore the BEM methodology, its core principles, and the benefits it brings to software development.

Understanding BEM: What Is It?

When you are creating smaller websites, the organization of your designs is usually not a big deal. You only need to write the relevant CSS and build your customary files. However, while working on larger, trickier tasks, the organization of your code becomes crucial. The organization of the code is much more important when working in a team comprising both front-end and back-end developers. Furthermore, it is worse if your code deviates from any standards or practices. The purpose of this tutorial is to show you how to apply a BEM-style methodology.

B.E.M., or Block, Element, and Modifier, is an abbreviation. Yandex engineers came up with this class naming method for HTML and CSS. The main goal of this methodology is to help a team understand how HTML and CSS interact with one another in their projects.

Block

A block relates to an object on your website. A more major structural piece of your code, if you will. The most common blocks on all websites right now are the header, content, sidebar, footer, and search. The greatest place to begin when chaining your CSS classes on to BEM is using blocks. Think about the following instances of blocks:

.menu {/* Some Styles */}
.content {/* Some Styles */}
.search {/* Some Styles */}

Element

Elements are the children of blocks and represent individual parts of a block. They cannot exist independently and always depend on their parent block. An element’s class name is formed by combining the block’s name with a double underscore (__). For instance, within a navigation block, you might have elements like “navigation__item” or “navigation__link.”

Modifier

We use a modifier to express changes made to a block. If you’ve ever used Bootstrap, the button sizes would provide the ideal example. Since button sizes are essentially variations in the size of the button, they act as the modifier:

Highlighted piece of content: .menu__item–link {/* Some Styles */}
Menu link: .content__article–featured {/* Some Styles */}
Search field that can have icons: .search__input–icon {/* Some Styles */}

Naming Conventions

Making CSS selector names as concise and informative as possible is the fundamental objective of the BEM approach. The following is a description of the original BEM style:

1. Block Level Naming Conventions:

• The block name is often one word, such as “header,” but if the block definition is lengthier, it is divided by a single hyphen -:

E.g: .lang-switcher {/* Some Styles */}

2. Element Level Naming Conventions:

• Element name starts with double underscore __:

E.g: .lang-switcher__flag {/* Some Styles */}

3. Modifier Level Naming Conventions:

• Modifier name starts with single underscore _:

E.g: .lang-switcher__flag_basic {/* Some Styles */}

As alternatives to the standard BEM styles, there are Harry Roberts and CamelCase styles.

1. In the manner of Harry Roberts:
.block-name__element-name–modifier-name {/* Some Styles */}

2. In the manner of Camel Case:
.BlockName__ElementName_ModifierName {/* Some Styles */}

Let’s have a look at the HTML below, which is BEM structured:

Organization of a BEM Project's File System

It’s crucial to arrange your files appropriately in BEM. In addition to providing you with a fantastically clear organization of CSS classes, BEM also gives you a very maintainable file structure.

Let’s examine a project example that mixes SASS files and the BEM file structure technique:

blocks/
input/
__box/
–big/
input__box–big.scss
input__box.scss
button/
–big/
button–big.scss

Using CSS Preprocessors with BEM

Benefits of BEM in Software Development

Maintainability

One of the significant advantages of BEM is its maintainability. By using a clear and consistent naming convention, developers can quickly understand the purpose and relationships of various components. This organization reduces the likelihood of style conflicts and unintended side effects, making it easier to maintain and update the codebase over time.

Scalability

As projects grow larger, managing CSS can become a daunting task. BEM’s modularity allows developers to break down complex UIs into smaller, manageable components. These components can then be reused throughout the project, promoting code reusability and scalability.

Collaboration

BEM’s naming convention and structured approach to CSS make it easier for teams to collaborate effectively. Developers can work on different components simultaneously without stepping on each other’s toes. The clarity in code also simplifies code reviews and reduces confusion among team members.

Performance

BEM’s approach to code organization can lead to performance improvements. By reusing components and avoiding unnecessary specificity in CSS, the size of the CSS file is minimized. This, in turn, results in faster page load times and improved user experience.

Isolation of Styles

BEM’s strict naming convention helps prevent style leakage and unintended side effects. Each component’s styles are confined to its block, ensuring that changes made to one block won’t inadvertently affect other parts of the website.

Readability

BEM’s descriptive class names make the code more readable and self-documenting. Developers can easily understand the purpose of a block, element, or modifier by looking at its class name, even without diving into the code.

Conclusion

The BEM methodology is a valuable tool for front-end developers seeking to create scalable, maintainable, and organized codebases. By adopting BEM’s naming conventions and modular approach, development teams can efficiently collaborate, reduce code complexity, and build flexible UI components. With the growing complexity of modern web applications, BEM has proven to be a valuable asset in the developer’s toolbox, allowing them to tackle challenges head-on and deliver high-quality, robust software products. So, the next time you embark on a front-end project, consider using BEM to harness its numerous benefits and build outstanding user interfaces.

Want to know more?

Contact our top software engineers for all the relevant project information. Let us schedule a Free consultation to allow you to share all software development requirements.