BEM in Angular: Enhancing CSS Maintainability and Scalability

When we work with Angular, the organisation of the CSS code is crucial to ensure a scalable and easily maintainable project. One of the most commonly used methods for structuring styles is BEM (Block, Element, Modifier).

In this article, we explain what BEM is and how to use it in Angular with simple examples. We will also discuss its benefits and best practices.

What is BEM?

BEM is an approach to naming CSS classes that aims to improve the structure, clarity and maintainability of code.

The naming convention for blocks, elements and modifiers is as follows:

• Block: a stand-alone component element that groups multiple parts.
• Element: Components of a block that compose it.
• Modifier: Changes the appearance or behaviour of a block or element

.block { }
.block__element { }
.block--modifier { }

Why use the BEM methodology in Angular?

Angular is based on components, so the use of BEM is ideal. It is also favoured by the fact that each component has its own CSS or SCSS file. Let’s look at a practical example.

Example of BEM in an Angular component

Let’s assume we have a card component. This includes two files: the HTML structure and the CSS or SCSS style.

HTML structure (card.component.html)

<div class="card">
  <h2 class="card__title">Título del Producto</h2>
  <p class="card__description">Descripción breve del producto.</p>
  <button class="card__button card__button--primary">Comprar</button>
</div>

Format templates with BEM (card.component.scss)

.card {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;

  &__title {
    font-size: 1.5rem;
    color: #333;
  }

  &__description {
    font-size: 1rem;
    color: #666;
  }

  &__button {
    padding: 10px 20px;
    border: none;
    cursor: pointer;

    &--primary {
      background-color: #007bff;
      color: #fff;
    }
  }
}

In this example, we can see that the main block contains the card class, to which the subordinate elements card__title, card__description and card__button belong. This maintains a hierarchical structure in both HTML and CSS.
The &__ selector is used to mark the elements of a block, while the &– selector is used for modifiers. In our case, card__button has the modifier primary, which is specified according to the following syntax:
card__button card__button–primary.
In this way, we can apply the required modifiers. In addition, thanks to Angular’s component-based potential, we can dynamically evaluate any modifier that is passed. For example, in the following case, we can insert the modifier with ngClass, depending on the variable primary if it has the value true.
HTML structure with conditional modifier (card.component.html)

<div class="card">
  <h2 class="card__title">Título del Producto</h2>
  <p class="card__description">Descripción breve del producto.</p>
  <button 
    class="card__button
    [ngClass]="primary ? 'card__button--primary' : ''"
  >Comprar</button>
</div>

Advantages of using BEM in Angular

1. Modularity and Reusability

Each component in Angular is encapsulated so that styles can be defined without affecting other elements of the application. With BEM, this modularity is reinforced so that blocks can be reused in a flexible way.

2. Scalability

Large projects can grow without complications as BEM makes it easy to add new styles and components without unexpected disruptions.

3. Maintainability

BEM’s clear structure makes the code easy to read and understand, which helps developers maintain the project over time without the need for major refactoring.

Best practices when using BEM in Angular

1. Avoid deeply nested selectors

In Angular, it is common for selectors to be encapsulated. However, excessive use of deeply nested selectors can make the code less maintainable. It is recommended to keep the BEM structure clean, without unnecessary nesting.

2. Consistency in naming

Using a standardised format for all components ensures better collaboration within the team. Defining internal guidelines helps to maintain coherence in the project.

3. Use of variables and mixins in SCSS

SCSS allows the definition of variables and mixins to improve the reusability of the code. It is advisable to combine this with the BEM methodology to achieve more efficient code

$primary-color: #007bff;

.card {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 8px;

  &__title {
    font-size: 1.5rem;
    color: #333;
  }

  &__button {
    @mixin button-style($bg-color) {
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      background-color: $bg-color;
      color: #fff;
    }

    &--primary {
      @include button-style($primary-color);
    }
  }
}

Conclusion

By using BEM in Angular, we get cleaner, better organised and maintainable code. Thanks to its clear structure, this methodology improves scalability and team collaboration.

Wata Factory is at the forefront of the latest technologies and considers BEM to be a very powerful and useful methodology to use in our Angular projects.