Metodología BEM. ¿Qué es y cómo trabajar con ella?

Introducción a BEM

BEM (Bloque, Elemento, Modificador) es una metodología de organización de código que ayuda a los desarrolladores a escribir CSS y HTML cómodos y fáciles de mantener. Fue creada por Yandex para resolver el problema de los estilos enredados y la complejidad en el escalamiento de las aplicaciones web.

Imagina que estás construyendo un constructor y cada pieza de código es un bloque o elemento que se puede reemplazar, cambiar o mejorar fácilmente. BEM hace que el código sea modular y comprensible, lo que es especialmente útil si trabajas en equipo o si el proyecto se desarrollará durante muchos años. BEM ayuda a evitar confusiones y mantener el orden en el código, incluso si decenas de desarrolladores están involucrados en el proyecto. 🎯

Conceptos básicos de BEM

La metodología BEM se basa en tres conceptos clave:

1. Bloque (Block)

Un bloque es un elemento de interfaz independiente y autónomo que se puede reutilizar. Por ejemplo, un botón, un formulario, un menú: todos son bloques. Los bloques se pueden anidar entre sí, pero al mismo tiempo conservan su independencia.

Ejemplo de bloque:

<div class="button">Купить</div>

Los bloques son los principales elementos de construcción a partir de los cuales se construye la interfaz. Pueden contener elementos que dependen del bloque y no pueden existir por separado.

2. Elemento (Element)

Un elemento es una parte de un bloque que no puede existir separada de él. Los elementos ayudan a dividir un bloque en sus partes componentes, mientras que los elementos siempre pertenecen a un bloque específico. Añaden características adicionales y componentes visuales, pero permanecen atados a su bloque.

Ejemplo de elemento:

<div class="button">
  <span class="button__text">Купить</span>
</div>

Aquí button__text es un elemento del bloque button. Presta atención a los dos guiones bajos (__): esta es la designación estándar de un elemento en BEM. Esta denominación ayuda a evitar conflictos de estilo y a comprender de inmediato qué bloque incluye este elemento.

3. Modificador (Modifier)

Un modificador es una propiedad que cambia la apariencia o el comportamiento de un bloque o elemento. Por ejemplo, un modificador puede cambiar el color de un botón en función de su estado o añadir funciones adicionales.

Ejemplo de modificador:

<div class="button button--active">Купить</div>

Aquí button--active es el modificador del bloque button. Dos guiones (--) se utilizan para indicar un modificador. Los modificadores permiten añadir o cambiar las propiedades de un bloque sin afectar a su estructura básica.

¿Por qué es necesario BEM?

De hecho, el código se puede escribir de diferentes maneras, y probablemente ya hayas visto estilos que son difíciles de entender. 🤔 Cuando las clases tienen nombres incomprensibles o están demasiado conectadas entre sí, editar ese código se convierte en un verdadero dolor de cabeza.

BEM ayuda a resolver estos problemas:

• Mejora la legibilidad del código. Incluso si ves el código por primera vez, es fácil entender a qué se refiere cada uno de los nombres de las clases. Cada clase da una idea completa de cómo el elemento está integrado en la interfaz.

• Evita los conflictos de estilo. Dado que cada bloque, elemento y modificador tiene un nombre único, los estilos no se superpondrán aleatoriamente. Esto es especialmente importante cuando se trabaja en grandes proyectos, donde se pueden usar los mismos estilos en diferentes partes de la interfaz.

• Facilidad de escalamiento. Si el proyecto crece, añadir nuevos elementos o cambios es más fácil, ya que cada bloque y elemento están claramente separados entre sí. Cuando el código está organizado según la metodología BEM, es más fácil de mantener y ampliar sin temor a romper la funcionalidad existente.

• Simplifica el trabajo en equipoGracias a las claras reglas de nomenclatura, todos los miembros del equipo pueden entender fácilmente el código y trabajar con él, incluso si no participaron en su creación inicialmente.

Cómo trabajar con BEM

Para empezar a usar BEM, no necesita tener ningún conocimiento especial. Todo lo que se requiere es una comprensión de HTML y CSS, así como el deseo de organizar el código de una manera más estructurada. BEM se integra fácilmente en cualquier proyecto y puede simplificar el trabajo tanto en proyectos pequeños como grandes.

Ejemplo de uso de BEM en la práctica

Digamos que tenemos una tarjeta de producto. Representemos su estructura usando BEM:

<div class="product-card">
  <div class="product-card__image">
    <img src="/path/to/image.jpg" alt="Product image">
  </div>
  <div class="product-card__details">
    <h3 class="product-card__title">Название товара</h3>
    <button class="product-card__button product-card__button--buy">Купить</button>
  </div>
</div>

Aquí:

• product-card es un bloque que representa toda la tarjeta del producto. Es un componente independiente que se puede mover o reutilizar fácilmente en otros lugares.

• product-card__image y product-card__details son elementos que pertenecen al bloque product-card. Describen las diferentes partes de la tarjeta y dependen del bloque.

• product-card__button--buy es un modificador de botón que puede cambiar su comportamiento (por ejemplo, ponerlo verde para una llamada a la acción). Esto es útil cuando necesitas crear diferentes versiones del mismo elemento sin cambiar su clase base.

Pros y contras de usar BEM

Ventajas:

1. Legibilidad y claridad. Las clases tienen una estructura lógica y describen a qué se refieren, lo que simplifica su comprensión.

2. Fácil de mantener y desarrollar. El código escrito en BEM es fácil de ampliar. Se añaden nuevos bloques y elementos sin riesgo de romper la funcionalidad existente.

3. Minimización de conflictos de estilos. Gracias a los nombres únicos de las clases, se excluye la posibilidad de intersecciones aleatorias en los estilos.

4. Universalidad. La metodología es adecuada tanto para proyectos pequeños como grandes. Proporciona orden en el proyecto, independientemente de su escala.

Desventajas:

1. Redundancia de nombres. Los nombres de clase largos pueden parecer incómodos, especialmente al principio, pero ayudan a evitar conflictos y confusiones.

2. Requiere disciplina. Para cumplir plenamente con BEM, es necesario vigilar de cerca la denominación y la estructura de las clases, lo que puede requerir algún tiempo para acostumbrarse.

¿Qué habilidades se necesitan para trabajar con BEM?

Para empezar a trabajar con la metodología BEM, necesitas conocimientos básicos de HTML y CSS. Aquí tienes algunas cosas clave que te ayudarán:

• Comprensión de las clases CSS. Es necesario saber crear clases y nombrarlas correctamente. Esta es la base del trabajo con BEM, ya que toda la estructura de la metodología se basa en los nombres de las clases.

• Deseo de organizar el código. BEM se trata de estructura y orden, por lo que es muy importante esforzarse por hacer que el código sea limpio y lógico. Cuanto más cuidadosamente se cree bloques y elementos, más fácil será mantener el proyecto en el futuro.

• Conocimiento de los principios de modularidad. BEM divide toda la interfaz en bloques independientes, por lo que es importante pensar en términos de componentes pequeños. Cada componente debe ser autónomo y no depender de otras partes de la interfaz.

• Habilidades de trabajo en equipo. Si trabajas en equipo, la comprensión y el uso de BEM hace que el trabajo sea más fluido y comprensible para todos los participantes.

Conclusión

La metodología BEM ayuda a que tu código esté más estructurado, sea más legible y fácil de mantener. ✨ Incluso si ahora te parece demasiado complicado, créeme: en cuanto empieces a usar BEM, organizar el código será más fácil y agradable. BEM crea reglas claras que son fáciles de seguir, lo que hace que el desarrollo sea más eficiente y comprensible.

Además, BEM ayuda a evitar errores típicos asociados con estilos confusos y nombres de clases poco prácticos. Esto es especialmente importante cuando el proyecto crece y hay muchos desarrolladores involucrados. Cada bloque y elemento está claramente separado, y sus nombres únicos evitan conflictos y malentendidos. Cuando el proyecto crece, la estructura propuesta por BEM ayuda a añadir nuevas funciones y mantener las antiguas con facilidad.

¡Esperamos que este artículo te haya ayudado a comprender los principios básicos de BEM y te haya inspirado a usar esta metodología en tus proyectos! Si acabas de empezar tu viaje en el desarrollo web, intenta aplicar BEM en pequeños ejemplos para sentir sus beneficios en la práctica. Verás cómo la organización del código se vuelve más simple y comprensible. 😊

Si te interesa este tema, escríbenos y haremos un minicurso sobre cómo trabajar con BEM en el lenguaje más simple y comprensible posible. 💻📚