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.

The post BEM in Angular: Enhancing CSS Maintainability and Scalability appeared first on WATA Factory.

Since Angular 2, this framework has developed progressively and continuously and has positioned itself as one of the most important frameworks in recent years. But what are the advantages?

What advantages does Angular offer?

Angular brings many advantages In the following section we will focus on those that are most important to us:

• Angular uses TypeScript, with all its advantages, as a basis. This makes the (abundant) documentation easier to understand, design patterns are more clearly recognizable and the code is easier to read. This consistency (compared to pure Javascript) also leads to the fact that overloading and confusion, which can occur when introducing a new framework, can be avoided with Angular.
• Standardized web components that allow the creation of new, custom, reusable and self-contained HTML tags that can later be reused in other Angular applications and relatively easily converted into native web components

Angular 8: the transition to a comprehensive modernisation

Angular 8 is a stepwiseascent for the big change: Angular 9. At this intermediate step, we can benefit from Angular in all its glory, as it has a stable core and new features that enhance usability:

• Lazy Loading, refers to the delay in loading or initializing an object until the moment it is used. Although this pattern is widely used, Angular makes it easier to use by implementing it in the core from the start, which saves on loading objects and improves loading times for both the user and the developer.
• Differential loading: one of the biggest changes in angular, and a major reason to migrate a project. This feature allows you to compile two bundles simultaneously, so you can use one or the other bundle depending on the browser you are using. This feature is a plus in development where compatibility between old (IE, older versions of Edge) and modern browsers (i.e. ES5 or ES6) must be maintained, while reducing the size of the bundles by 7 to 20%.
• Web Workers: We finally have Minions in the core to get the job done! Starting with version 8, Angular supports Web Workers, which allows us to create tasks in the background in the browser.

For developers we also find a number of benefits that improve our implementations, such as:

• New functions in routing.
• Improvements in dependency management.
• Finally, the HTTP library is renewed and replaced by the HTTPClient.
• It is no longer necessary to create the browserlist and set the path, it is now configured by default.

But the big change comes with IVY, the new rendering engine implemented in later versions of the framework – Angular 9 – which is responsible for some improvements in Angular 8. What will be available in this version?

• An Incremental DOM as main structure. It is based on the creation of a tree with the statements already compiled from each component, forming a DOM network and DOM branches With this new structure, the DOM update time is reduced because it is not necessary to build the complete tree, but only the affected branch.
• “Shakable Tree“: method that “shakes” the branches of the DOM tree, ignoring the instructions that are not used at that time, reduces the weight of the packages and shortens the loading time.
• Load Memory Footprint: Intelligent loading method that helps to save memory when the DOM tree has not or hardly changed. This happens when you update a component without major changes in its DOM tree and create “shaking” that ignores and reuses a large part of the branches of the DOM tree without using memory for its creation. With Angular 8, we benefit from the major improvements the framework implements in later versions, but retain the stability Angular 7 provides. Interested in migrating a project?

How do you migrate a project from Angular 7 to Angular 8?

The migration is very simple, and requires these necessary steps beforehand:

• We replace the HTTP library with the HTTP client library.
• We update to RxJS6.
• We are updating Node to version 10 or higher and TypeScript to version 3.4.
• We replace /deep/with ::ng-deep, which is much more efficient and attractive for our CSS code.

Once these steps are complete, we only need to updatethe core and CLI of our Angular project to version 8:

ng update @angular/cli @angular/core

If Angular notifies us that changes have not been uploaded to the repository, we can run the next command to remedy this:

ng update @angular/core --from 7 –to 8 –migrate-only –allow-dirty

And that’s it! We have already updated our Angular project to version 8

The post Migration of a project from Angular 7 to Angular 8: What are the benefits? appeared first on WATA Factory.