BEM en CSS es una metodología con la que puedes estructurar y organizar el código CSS de manera modular y reutilizable.
En lugar de escribir reglas CSS desordenadas o difíciles de mantener, BEM te ayuda a crear un sistema coherente que facilita el trabajo en proyectos grandes.
Me encargaré de que sepas todo sobre BEM para CSS, cómo implementarlo y por qué es tan importante en la industria del desarrollo web.
¿Qué es BEM en CSS?
Imagina que estás construyendo una casa. Para evitar que las paredes y las habitaciones se mezclen de manera caótica, decides usar un sistema de etiquetas claras, como “puerta”, “ventana”, “pared”.
Esto te permite organizar tu espacio de forma ordenada, y es precisamente lo que hace BEM en CSS. Es un sistema de nomenclatura que divide las clases en bloques, elementos y modificadores para garantizar que todo esté claramente identificado y sea fácil de encontrar.
Este enfoque de organización no solo mejora la legibilidad del código, sino que también te ayuda a mantener tu CSS escalable y fácil de modificar, incluso cuando el proyecto crece.
Desde que empecé a usar BEM para CSS, mis proyectos han tenido una estructura mucho más clara y menos propensa a los errores.
¿Cómo funciona BEM para CSS?
BEM se basa en tres conceptos clave:
Bloque (Block)
Un bloque es un componente independiente que tiene un propósito en la interfaz.
- Ejemplo: header, button, menu.
Elemento (Element)
Un elemento es una parte del bloque que no tiene sentido por sí sola. Depende de su bloque para existir.
- Ejemplo: header__logo, button__icon, menu__item.
Modificador (Modifier)
Un modificador es una variación de un bloque o elemento. Sirve para cambiar el estado o apariencia de un bloque/elemento.
- Ejemplo: button–primary, menu__item–active.
Ejemplo: Estructurando las clases en un menú de navegación
Estás trabajando en un proyecto de un menú de navegación. ¿Cómo estructurarías las clases? Pues usando la metodología BEM como te voy a mostrar aquí:
<div class="menu">
<ul class="menu__list">
<li class="menu__item menu__item--active">
<a href="#" class="menu__link">Inicio</a>
</li>
<li class="menu__item">
<a href="#" class="menu__link">Servicios</a>
</li>
</ul>
</div>
Y el CSS correspondiente:
.menu {
list-style: none;
background-color: #333;
}
.menu__list {
display: flex;
}
.menu__item {
margin: 0 10px;
}
.menu__item--active {
font-weight: bold;
}
.menu__link {
color: #fff;
text-decoration: none;
}
Desglose:
- menu: Es el bloque que contiene toda la estructura del menú.
- menu__list: Es un elemento que pertenece al bloque menu, representando la lista de elementos.
- menu__item: Es otro elemento dentro del bloque
menu, representando cada elemento de la lista. - menu__item–active: Es un modificador que aplica un estilo especial (negrita) a los elementos activos.
Como puedes ver, cada clase tiene una función específica y clara.
Esto facilita la modificación, ya que sabes exactamente qué hacer si necesitas cambiar algún aspecto del diseño o comportamiento del bloque, elemento o modificador.
Ejemplo práctico avanzado para enseñarte a usar BEM en CSS
Ahora que tienes una idea básica, vamos a crear un ejemplo más avanzado.
Te encuentras trabajando en un sistema de tarjetas (como las de una galería de productos) con opciones de añadir al carrito.
Aquí verás cómo BEM organiza tanto los bloques como sus elementos y modificadores.
<div class="card">
<img src="product.jpg" alt="Producto" class="card__image">
<h2 class="card__title">Nombre del producto</h2>
<p class="card__description">Descripción breve del producto.</p>
<button class="card__button card__button--add-to-cart">Añadir al carrito</button>
</div>
.card {
border: 1px solid #ddd;
padding: 20px;
}
.card__image {
max-width: 100%;
height: auto;
}
.card__title {
font-size: 1.5em;
}
.card__description {
color: #555;
}
.card__button {
padding: 10px 20px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
.card__button--add-to-cart {
background-color: #007bff;
}
Desglose:
- card: El bloque principal que representa la tarjeta del producto.
- card__image: El elemento que contiene la imagen del producto.
- card__title: El título de la tarjeta, en este caso, el nombre del producto.
- card__description: La descripción del producto.
- card__button: El botón general de la tarjeta.
- card__button–add-to-cart: Un modificador para cambiar el color del botón cuando es utilizado para añadir al carrito.
Aquí te demostré que la metodología BEM puede ser aplicada a un componente más complejo y cómo cada parte del componente está claramente identificada y estructurada.
¿Por qué utilizar BEM en CSS?
Si aún no has probado la metodología BEM, te animo a hacerlo. Desde mi experiencia personal, usar BEM para CSS ha mejorado significativamente la legibilidad y escalabilidad de mis proyectos.
La organización clara de bloques, elementos y modificadores hace que el código sea más fácil de mantener y modificar, y también facilita la colaboración con otros desarrolladores.
En resumen, la metodología BEM no solo es útil para mantener tu código limpio, sino que también mejora el rendimiento de tu equipo de trabajo al hacer que la estructura de tu código sea intuitiva y fácil de entender.
Si estás listo para llevar tu conocimiento de CSS al siguiente nivel, el Bootcamp de Desarrollo Web de KeepCoding te ofrece una formación completa que incluye la implementación de metodologías como BEM, ¡y mucho más!
