Entendiendo la metodología BEM

Ya sea durante nuestro aprendizaje o en la misma práctica laboral es probable que nos hallamos encontrado con un problema a la hora de nombrar nuestras clases de css. En este artículo conoceremos la metodología más usada para nombrar nuestras clases, BEM.

Con proyectos muy pequeños, asignar clases a las etiquetas de html suele ser un trabajo sencillo, y es que no tenemos que pensar tanto a la hora de nombrarlas, sin embargo, cuando nuestro proyecto escala empezamos a notar cierta dificultad e inconsistencia con las clases que vamos nombrando. Es por eso que es muy común ver un HTML de la siguiente manera.

  <header class="box-top">
      <img
        src="https://res.cloudinary.com/ionicimagesbank/image/upload/v1676553696/material/tutorials/Sample_Logo_mvdjix.png"
        alt=""
        class="logo"
      />
      <nav>
        <ul class="list">
          <li class="element-1">
            <a href="">features</a>
          </li>
          <li class="element-2">
            <a href="">pricing</a>
          </li>
          <li class="element-3">
            <a href="">community</a>
          </li>
          <li class="element-4">
            <a href="">support</a>
          </li>
        </ul>
      </nav>

      <button class="btn-register">register</button>
    </header>

Este es un pequeño ejemplo del HTML correspondiente al diseño de una barra de navegación, además previamente se puede apreciar una imagen previa.

Como se puede apreciar, hay muchas cosas que se podrían mejorar pero quisiera enfocarme solo en la problemática que viene después. El elemento <li class='elemento-1'> y los demás están definidos como elementos de algo, es decir como los elementos de list, el problema surge si quiero tener una lista de elementos de otra cosa, ¿Podré usar element-1 ? La respuesta es un sí a medias, lo podré usar siempre y cuando en el css combine selectores, porque de lo contrario tendré elementos de distintos tipos pero con clases nombradas igual.

Metodología BEM

(Block Element Modifier)

Esta metodología tiene un enfoque basado en componentes para el desarrollo web. Básicamente, se trata de dividir en bloques independientes cada subdivisión de nuestro layout.

Bloque:

Contenedor o contexto donde se encuentra un elemento. Conforma la raíz de una clase. El nombre del bloque describe su propósito, es por eso que para nombrar esta clase debemos hacernos la siguiente pregunta: ¿Qué es?

    <nav class="links-container">
      <a>Home</a>
      <a>Login</a>
      <a>Register</a>
    </nav>

Como se ve en la imagen anterior, tengo una etiqueta <nav> la cual tiene como fin contener un numero de links de navegación, haciendo este ejercicio, el nombre elegido sería links-container o contenedor de links

Elemento

Es una pieza del bloque. Se puede decir que el bloque es el contenedor principal y los elementos son las piezas que lo conforman. Este concepto de elemento no puede aplicarse sin antes haber definido un bloque que lo contenga.
Al igual que el bloque, el nombre del elemento también describe su propósito. Es por ello que también nos haremos la siguiente pregunta: ¿Qué es?

  <nav class="links-container">
      <a class="links-container__link">Home</a>
      <a class="links-container__link">Login</a>
      <a class="links-container__link">Register</a>
    </nav>

Para construir el nombre de la clase para un elemento será necesario anteponer el nombre del bloque seguido de dos guiones bajo, es decir:

• nombre-del-bloque__nombre-del-elemento

Modificador

Un modificador define la apariencia, estado o comportamiento de un bloque o un elemento. Como un ejemplo puntual, podríamos tener un contenedor de links: Home | Login | Register
Es probable que estos tres elementos, tengan que compartir el mismo estilo pero en el caso del register, este tendría una leve variación, ya que al inducir a una acción como registrarse será necesario hacerlo más llamativo. Por lo tanto, para nombrar dicha clase tendremos que preguntarnos: ¿Cómo se ve?

  <nav class="links-container">
      <a class="links-container__link">Home</a>
      <a class="links-container__link">Login</a>
      <a class="links-container__link links-container__link--red">Register</a>
    </nav>

Para la construcción del nombre de esta clase tendremos que anteponer el nombre del bloque seguido de dos guiones bajo, el nombre del bloque seguido de dos guiones del medio y por último el nombre de nuestra clase.

• nombre-del-bloque__nombre-del-elemento--nombre-del-modificador

Conclusión:

La metodología BEM nos abre un sin fin de posibilidades para nombrar clases de una manera consecuente y ordenada. Además, debido a su combinación de palabras, también nos proveerá de clases con más especificidad si es que además combinamos selectores en el css.