Modelo CSS BEM: una guía para escribir CSS escalable y mantenible

En este artículo, profundizaremos en la metodología BEM (Bloque, Elemento, Modificador), una convención de nomenclatura CSS popular que le ayuda a escribir CSS limpio, estructurado y mantenible para proyectos grandes. BEM garantiza que su código siga siendo escalable a medida que el proyecto crece y reduce las posibilidades de conflictos de estilo.

1. ¿Qué es BEM?

BEM significa:

• Bloque: una entidad independiente que tiene significado por sí sola, como un botón, menú o formulario.
• Elemento: Parte del bloque que realiza una función específica, como la etiqueta de un botón o un elemento de menú.
• Modificador: Una variación o estado de un bloque o elemento, como un botón deshabilitado o un elemento de menú resaltado.

La metodología BEM enfatiza la creación de código CSS reutilizable, predecible y mantenible.

Convención de nomenclatura BEM:

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

• Bloque: Representa el contenedor principal.
• Elemento: sigue al nombre del bloque, separado por un doble guión bajo (__).
• Modificador: Sigue el nombre del bloque o elemento, separado por un guión doble (--).

2. Definiendo la estructura

Analicemos la estructura de BEM con un ejemplo.

Ejemplo:

    
Home
        
About
        
Contact
    

En este ejemplo:

• Bloque: .menu es el bloque principal que representa el menú de navegación.
• Elemento: .menu__list y .menu__item son elementos dentro del bloque.
• Modificador: .menu__item--active es un modificador que indica el estado activo del elemento del menú.

3. Bloques en BEM

Un bloque es un componente independiente y reutilizable. Piense en ello como una entidad autónoma que puede colocarse en cualquier lugar de su código sin preocuparse de que su estilo se vea afectado por otros elementos.

Ejemplo:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

Aquí, .button es un bloque que define los estilos de un componente de botón. Puedes reutilizar este bloque en varias partes de tu sitio web.

4. Elementos en BEM

Un elemento es parte de un bloque que no tiene un significado independiente. Está vinculado al bloque y existe para realizar una función relacionada con el bloque.

Ejemplo:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

Aquí:

• .button__icon es un elemento dentro del bloque .button, que representa un icono en el botón.
• .button__label es otro elemento que representa la etiqueta de texto del botón.

5. Modificadores en BEM

Un modificador representa una variación de un bloque o elemento. Los modificadores se utilizan para cambiar la apariencia o el comportamiento de un componente, como cambiar el color de un botón o agrandar un elemento.

Ejemplo:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

Aquí:

• .button: primario es un modificador que cambia el color de fondo del botón.
• .button--large es otro modificador que aumenta el tamaño del botón.

Los modificadores también se pueden aplicar a los elementos:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6. Beneficios de usar BEM

• Escalabilidad: BEM está diseñado para ser escalable, lo que lo hace ideal para proyectos más grandes con muchos componentes.
• Reutilizabilidad: Los bloques son autónomos y se pueden reutilizar en diferentes partes de un proyecto.
• Mantenibilidad: BEM fomenta la denominación clara y coherente, lo que facilita el mantenimiento de CSS a medida que crece el proyecto.
• Previsibilidad: puedes saber fácilmente qué elementos pertenecen a qué bloques y comprender sus variaciones según el modificador.

7. BEM en acción

Veamos un ejemplo más completo que incluye bloques, elementos y modificadores:

HTML:

    

        
Card Title
    
    

        
This is a simple card component.
    
    

        Read More
    

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

En este ejemplo:

• .card es el bloque que representa todo el componente de la tarjeta.
• .card__header, .card__title, .card__body y .card__footer son elementos dentro del bloque de tarjetas.
• .card__button: primario es un modificador que aplica un estilo principal al botón dentro de la tarjeta.

8. Errores comunes que se deben evitar en BEM

• Demasiados elementos anidados: Evite elementos profundamente anidados, ya que pueden generar nombres de clase innecesariamente largos.
• Modificadores innecesarios: Utilice modificadores solo cuando necesite cambiar la apariencia o el estado de un bloque o elemento.
• Combinando BEM con otras convenciones de nomenclatura: Cíñete a BEM en todo el proyecto para mantener la coherencia.

Conclusión

La metodología BEM es una forma poderosa de mantener su CSS organizado, predecible y escalable. Al dividir sus componentes en bloques, elementos y modificadores, puede mantener un código más limpio y evitar conflictos de estilo, lo que hace que el desarrollo sea más rápido y más eficiente a medida que su proyecto crece.

Sígueme en LinkedIn

Ridoy Hasán