En este artículo, explicaremos qué es BEM y cómo aplicarlo en Angular con ejemplos sencillos, además de profundizar en sus ventajas y mejores prácticas. 

¿Qué es BEM? 

Es un enfoque para la nomenclatura de clases CSS que busca mejorar la estructura, la claridad y la mantenibilidad del código. 

La nomenclatura para el bloque, elementos y modificadores es la siguiente: 

• Bloque (Block): Componente independiente que agrupa los elementos.
• Elemento (Element): Partes del bloque que lo conforman.
• Modificador (Modifier ): Cambia la apariencia o el comportamiento de un bloque o un elemento.

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

¿Por qué aplicar la metodología BEM en angular? 

Angular está basado en componentes, por lo que la aplicación de BEM es idónea y además es propicia a ello al tener cada componente su archivo CSS o SCSS. Veamos un ejemplo práctico. 

Ejemplo de BEM en un Componente Angular 

Supongamos que tenemos nuestro componente card, tenemos dos archivos, la estructura HTML y el de estilos CSS o SCSS. 

Estructura HTML (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>

Estilos con 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;
    }
  }
}

En este ejemplo vemos que el bloque principal contiene la clase card, de la cual contiene los elementos hijos card__title, card__description y card__button, de esta forma se sigue una estructura jerárquica tanto en HTML y CSS. Se usará el selector &__ para diferenciar a los elementos del bloque y el selector &– para modificadores, en nuestro caso card__button tiene aplicado el modificador primary, para indicarlo seguiremos la siguiente sintaxis: card__button card__button--primary.

De esta forma podremos aplicar los modificadores que necesitemos, además usando el potencial de angular basado en componentes, podremos tener cualquier tipo de modificador que se reciba de forma dinámica en su evaluación, por ejemplo en el siguiente caso insertaremos el modificador con ngClass dependiendo de una variable primary cuando viene con el valor true.

Estructura HTML con modificador condicional (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>

Ventajas de Usar BEM en Angular

1. Modularidad y Reutilización

Cada componente en Angular está encapsulado, lo que permite definir los estilos sin afectar otros elementos de la aplicación. Con BEM, esta modularidad se refuerza, permitiendo reutilizar los bloques de manera flexible.

2. Escalabilidad

Los proyectos de gran tamaño pueden crecer sin complicaciones, ya que BEM facilita la adición de nuevos estilos y componentes sin interferencias inesperadas.

3. Mantenibilidad

La estructura clara de BEM hace que el código sea fácil de leer y comprender, lo que ayuda a los desarrolladores a mantener el proyecto a lo largo del tiempo sin necesidad de grandes refactorizaciones.

Mejores Prácticas al Usar BEM en Angular

1. Evitar Selectores Profundos

En Angular, es común ver selectores encapsulados, pero abusar de selectores profundos puede hacer que el código sea menos mantenible. Es recomendable mantener la estructura de BEM limpia sin anidaciones innecesarias.

2. Consistencia en la Nomenclatura

Usar un formato uniforme para todos los componentes asegura una mejor colaboración en el equipo. Definir guías internas ayuda a mantener la coherencia en el proyecto.

3. Uso de Variables y Mixins en SCSS

SCSS permite definir variables y mixins para mejorar la reutilización del código. Es recomendable combinarlas con la metodología BEM para obtener un código más eficiente.

$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);
    }
  }
}

Conclusión

Usando BEM en Angular, conseguimos un código más limpio, organizado y fácil de mantener. Gracias a su estructura clara, esta metodología mejora la escalabilidad y la colaboración en equipo.

En WATA Factory estamos a la vanguardia de las últimas tecnologías y consideramos BEM una metodología muy potente y útil para aplicar a nuestros proyectos de Angular.

The post BEM en Angular: Mejorando la mantenibilidad y escalabilidad de CSS appeared first on WATA Factory.

Desde Angular 2, este framework ha tenido un avance progresivo y continuo, posicionándose como uno de los frameworks más importantes en los últimos años. Pero ¿qué beneficios proporciona Angular?

¿Qué beneficios aporta Angular?

Angular aporta muchos beneficios. En esta sección nos centramos en los que, para nosotros, son los más importantes:

• Utiliza TypeScript como base, con las ventajas que esto conlleva. Por un lado, la unificación en los patrones de desarrollo, añadiendo mayor coherencia a la información y a la forma de leer el código. Por otro lado, esta consistencia en la unión ayuda a eliminar la sobrecarga, y las dudas derivadas de empezar con un nuevo framework.
• Estandarizado de Componentes Web, permitiendo crear nuevas etiquetas HTML personalizadas, reutilizables y autocontenidas, que posteriormente pueden ser utilizadas en otras aplicaciones web.

Angular 8: la transición hacia una gran modernización

Angular 8 es una actualización de paso para el gran cambio: Angular 9. En este punto intermedio podemos beneficiarnos de Angular en todo su esplendor, poseyendo un núcleo estable y nuevas características que añaden mejoras a la experiencia de usuario:

• Lazy Loading, o lo que es lo mismo, retrasar la carga o inicialización de un objeto hasta el mismo momento de su utilización. Aunque este patrón es muy usado, Angular nos facilita su uso implementándolo en su núcleo, proporcionando un ahorro de precarga de objetos y mejorando la fluidez tanto para el usuario como para el desarrollador.
• Diferential loading: uno de los mayores cambios en Angular, y una razón de peso por la que migrar un proyecto. Esta característica permite compilar dos paquetes –bundles– a la vez, de manera que en función del navegador que estemos utilizando, se hará uso de un paquete o de otro. Esta característica es un punto a favor en desarrollo que necesitan mantener la compatibilidad entre navegadores antiguos y modernos (es decir, ES5 y ES6 respectivamente), beneficiándonos de una reducción en el peso de los paquetes de entre un 7% y un 20%.
• Web Workers: ¡por fin tenemos minions dentro del núcleo para hacernos el trabajo! A partir de la versión 8, Angular da soporte de Web Workers, lo que nos permite crear tareas en segundo plano dentro del navegador.

Para los desarrolladores también encontramos una seria de ventajas que mejoran nuestras implementaciones, como pueden ser:

• Nuevas funcionalidades en el routing.
• Mejoras en las dependencias.
• Por fin se renueva la librería HTTP, dándole la bienvenida a HTTPClient.
• Ya no es necesario crear el Browserlist y establecer su ruta, ahora viene configurado por defecto.

Pero el gran cambio viene con IVY, el nuevo motor de renderizado que se ha implementado en posteriores versiones del framework – Angular 9-, y responsable de que se hayan aplicado ciertas mejoras en Angular 8. ¿Cuáles tendrémos disponibles en esta versión?

• Un DOM incremental como estructura principal. Se basa en la creación de un árbol con las instrucciones ya compiladas de cada componente, formando una red o ramas DOM. Con esta nueva estructura, se reduce el tiempo de actualización del DOM, ya que no hace falta contruir el árbol completo, solo crear la rama afectada.
• Tree «shakable»: Método que sacude las ramas del arbol DOM, ignorando las instrucciones que no se van a utilizar en ese momento, disminuyendo el peso de los paquetes y reduciendo el tiempo de carga.
• Load Memory Footprint: Método de carga inteligente que ayuda en el ahorro de memoria de renderizado cuando el árbol DOM no ha cambiado. Ocurre al actualizar un componente sin grandes cambios en su árbol DOM, produciendose una sacudida que ignora gran parte de las ramas del árbol DOM, siendo éstas utilizadas de nuevo sin gastar memoria para su creación. Con Angular 8 nos beneficiamos de las mejoras más importantes que el framework implementa en versiones posteriores, pero manteniendo la estabilidad que proporciona Angular 7. ¿Te animas a migrar tu proyecto?

Cómo migrar un proyecto de Angular 7 a Angular 8

La migración es muy sencilla, y para realizarla necesitamos realizar los siguientes pasos antes de migrar:

• Sustituimos la librería HTTP por la librería HTTP Client.
• Actualizamos a RxJS6.
• Actualizamos Node a la versión 10 o poterior y TypesCript a la versión 3.4.
• Reemplazamos /deep/ por ::ng-deep, mucho más eficiente y atractivo para nuestro código CSS.

Terminados estos pasos, simplemente debemos actualizar el Core y el CLI de nuestro proyecto Angular a la versión 8:

ng update @angular/cli @angular/core

Si Angular nos avisa de que tenemos cambios sin subir al repositorio, podemos lanzar la siguiente sentencia para ponerle remedio:

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

¡Y listo! Ya disponemos de nuestro proyecto Angular actualizado a la versión 8

The post Migrando un proyecto Angular 7 a Angular 8: ¿cuáles son sus beneficios? appeared first on WATA Factory.