Guía para usar BEM

BEM es una metodología para nombrar las clases de los elementos HTML, que tiene como objetivo manejar interfaces de usuario complejas.

Entre sus ventajas está que ayuda a evitar nombrar muchos elementos de la misma forma, por lo que disminuye el anidamiento y el exceso de especificación de los estilos.

A diferencia de muchas tecnologías que se han puesto de moda los últimos años como tailwind y los módulos CSS en JavaScript, BEM es agnóstico a la tecnología, ya que no que funciona con CSS puro de toda la vida, aunque el usar preprocesadoress como Sass pudiera ser de gran ayuda.

¿Por qué usar BEM?

Entre las ventajas de uso de esta metodología tenemos:

  • Incrementa la escalabilidad del código CSS
  • Estandariza el proceso de nombrar variables
  • Facilita la modificación de los estilos.
  • Evita la colisión de clases

¿Por qué no usar BEM?

Aunque BEM se adapta «bien» en general a casi cualquier proyecto, hay algunas desventajas al momento de utilizar esta metodología, como:

  • Puede disminuir la reutilización del código
  • Desarrollo lento cuando se trabaja con componentes

Reglas

Cada una de las clases en BEM se definen con componentes de las siguientes 3 categorías:

  • Bloque
  • Elemento
  • Modificador

Estos a su vez, se acomodan en las clases de la siguiente manera

  • bloque__elemento—modificador

A continuación explicaremos cada una de las categorías.

Bloque

Son un conjunto de elementos independientes que están relacionados entre sí.

Ejemplo:

Una tarjeta llamada card es un bloque que contiene elementos como el titulo y la descripción

<div class="card">
	<!--- contenido del card -->
</div>

Otros ejemplos de bloques pueden ser:

  • sections
  • inputs
  • containers
  • navs

Elemento

Son los elementos mínimos que hay en el documento.

En el contexto de BEM, un elemento pertenece al bloque, así que para nombrarse se debe:

  1. Definir el nombre del bloque primero
  2. Después del nombre del bloque, se agrega una separación con dos guiones bajo (”__”) y después se agrega el nombre del elemento.

Por ejemplo. Siguiendo el caso anterior:

<div class="card">
	<h2 class="card__title">¡Hola Mundo!</h2>
	<p class="card__description"> Esta es la información de la tarjeta</p>
</div>

Para este caso, los elementos son:

  • card__title
  • card__description

Lo siguiente es agregar los estilos en el archivo CSS.

.card__title {
	font-weight: 600;
}

.card__description {
	margin: 2rem;
}

Consideraciones

Estos son algunos de los elementos más comunes:

  • title
  • item
  • link
  • paragraph

Modificar

El modificador es básicamente una variación de un elemento. Su objetivo es agregar pequeños cambios o particularidades a los estilos de un método.

Ejemplos más comunes de modificadores son:

  • checked, fixed, primary o algún color en específico

Un ejemplo clásico del uso de modificadores, es en los botones

.btn--primary{
 background:blue;
}

.btn--secundary {
	background: red;
}

A nivel HTML se vería de la siguiente forma

<button class="btn btn--primart">Botón primario< /button>

Aclaración: Evita sobrescribir componentes

De acuerdo a los manuales de buenos prácticas de BEM, debes evitar sobrescribir componentes, ya que pierde la filosofía de la metodología y además puede incrementar la dificultad del mantenimiento.

Por ejemplo, se debería de evitar agregar estilos que modifiquen componentes que ya están definidos

<p class="main__paragraph margin-0">Botón primario< /p>

.main__paragraph {
	margin: 1rem 0;
	font-size: 1.2em;
}

.margin-0 {
	margin: 0!important;
}

Consejos y consideraciones

1. Usa verificadores de código BEM

Te permitirá ver si lo que has escrito cumple con los estándares y buenas prácticas de BEM

2. No es necesario usarlo con styled components, js modules, etc

BEM está diseñado específicamente para trabajar con archivos css, sin embargo, en el caso de enfoques por componentes como lo son los styled components, css modules, etc., en realidad no es necesario utilizar este sistema, ya que el contexto se encapsulan en el componente.

TaggedGuias