Cuando trabajamos con Angular, la organización del código CSS es fundamental para mantener un proyecto escalable y fácil de mantener. Una de las metodologías más utilizadas para estructurar los estilos es BEM (Bloque, Elemento, Modificador).
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.
