BEM: Metodología Modular para CSS

5

Yandex es el buscador web más popular  en Rusia, incluso superando al poderoso Google. Este buscador se plantó y estructuró como un ecosistema de servicios web y soluciones online, en un momento de su potencial crecimiento sintió la necesidad de cambiar para mejorar su arquitectura frontend e implementar una metodología que les ayudase a tener su código de estilos rigurosamente estructurado, es así como en el 2010 surgió la idea de estructurar por medio de Bloques, Elementos y Modificadores (BEM), que va más que una metodología de arquitectura CSS, de hecho este es un marco completo para el sistema frontend  que incluye una serie de reglas y herramientas para un desarrollo frontend global.

bem-logoHace unos días hablamos de las principales metodologías para estructurar nuestro código de estilos (Metodologías Modulares en CSS) e introducimos a la metodología BEM que en términos simples se refiere a:

  • Bloque: entidad independiente dentro de un documento web generalmente será un componente o módulo, estos pueden ser indentados, es decir bloques pueden contener bloques.
  • Elemento: hace referencia a un marcado o “elemento” descendente de un bloque, estos no puede utilizarse por sí solos sin el contexto de un bloque específico.
  • Modificador: hace referencia al estado o versión diferente de un bloque o un elemento, cabe decir que este estado puede ser opcional.

Veamos: Estructuralmente una página estará compuesta por bloques de información, ya sean de primer orden o secundarios.

BEM: Metodología Modular para CSS

Como podemos notar, cada elemento marcado en la anterior imagen representa un bloque de contenido o modulo que aunque esté dentro del mismo documento, se concibe tanto mental como estructuralmente como un bloque independiente dentro del conjunto. Por ejemplo: el bloque de la barra de menú, del logo, del buscador y contenedor principal.

BEM: Metodología Modular para CSS

Evidentemente los elementos son cada uno de los objetos que hacen parte del módulo dándole un sentido a este, por ejemplo los ítems del menú, los input del componente de login etc.

elementos-bem

Y como modificador podríamos tener cada estado o cambio que se genere en los bloques o en cada elemento, por ejemplo cuando los inputs entran en focus, cuando hacemos hover sobre los ítems del menú o cualquier enlace etc.

Realmente las ideas y conceptos de esta metodología son fáciles de comprender, diría que son una forma diferente de ver y estructurar nuestro código CSS en base a lo que siempre ha existido y de como siempre lo hemos tenido (me refiero a la estructura HTML).

De seguro si no conocías esto y después de entender las metodologías de estructura frontend’s, verás el código de forma diferente.

Escribiendo BEM

Las convenciones para escribir basados en BEM son las siguientes: Los bloques serán las clases que tomará el nombre de la estructura, los elementos serán delimitada con doble guion bajo __ y los modificadores serán delimitados con guion --.

.bloque{__elemento[--modificador]}

.bloque {}
.bloque__elemento {}
.bloque--modificador {}
Esta convención asegura que los desarrolladores identifiquen  lo que hace cada propiedad y los estados solo con mirar el nombre y los identificadores “__ o --”.
.red-social {...}
.red-social__li {...}
.red-social--twitter {...}
.red-social--twitter:hover {...}
El bloque .red-social puede tener múltiples li pero a su vez estas pueden modificar su estilo (color, imagen etc) dependiendo a cada red social que se desea mostrar, en este caso twitter.

Ahora, en esta metodología juega un papel principal lo que escribimos en el documento HTML ya que al final es lo que vamos a referenciar en la hoja de estilos CSS, es decir la estructuración va a comenzar en la hoja HTML, lugar donde especificamos la estructura del documento.

<ul class="menu">
   <li class="menu__item menu__item--activo"> Inicio </li>
   <li class="menu__item"> Quienes Somos </li>
   <li class="menu__item"> Portafolio </li>
   <li class="menu__item"> Noticias </li>
   <li class="menu__item"> Contacto </li>
</ul>
Como puedes ver hacemos referencia al bloque en todo momento contextualizando cada selector, que a su vez es definido como una entidad autónoma dentro del documento, es por eso que en el documento de estilos CSS se hace fácil entender que afecta cada regla definida, porque siempre contextualizamos los elementos.

También hay que tener en cuenta que los bloque también pueden tener modificadores, y se le pueden aplicar los que se requieran, veamos un ejemplo:

<button class="btn btn--claro btn--mediano"> Button </button>
<button class="btn btn--oscuro btn--mediano"> Button </button>
Veamos el resultado de los anteriores botones mezclando los modificadores disponibles:

See the Pen Seleccionar elementos por rangos con CSS by frontend (@tutosytips) on CodePen
20550

  • Un punto importante que se debe de tener en cuenta al utilizar la metodología BEM, es que los elementos no pueden tener dependencias, aun cuando sean hijos directos, porque esto nos llevaría a ser más específicos al momento de generar el CSS y esto desvía el fin de esta metodología.
  • Y otro punto es que los modificadores deben de ser un complemento y de ninguna forma deben de reemplazar las clases bases.
<!-- Buena disposicion -->
<div class="header">
   <a class="header__link header__link--principal">
      <h2 class="header__titulo header__titulo"> Titulo del Bloque </h2>
      <img class="header__imagen" src="imagen.png">
   </a>
</div>

<!-- Mala disposicion -->
<div class="header">
   <a class="header__link link--principal">
      <h2 class="header__link__titulo"> Titulo del Bloque </h2>
      <img class="header__link__imagen" src="imagen.png">
   </a>
</div>
Aunque trabajar bajo esta metodología representaría un cambio en la forma de estructurar tanto el HTML como el CSS para beneficio de los desarrolladores, hay varias quejas que se pueden denominar como los principales contra de esta metodología.

Esto son los 3 más comunes que he notado de muchos frontends:

  1. Convenciones largas y para muchos esto se les hace confuso y hasta feo.
  2. El tiempo que toma aprender y aplicar los principios de esta metodología, a muchos les ha complicado la vida.
  3. Sólo funciona con eficacia para grandes proyectos y equipos de trabajo grandes. La organización de archivos basado en componentes puede ser difícil de implementar para los proyectos pequeños.

y claro, los PRO son muchos, aquí te presentaré 3:

  1. Especificidad: ganamos en especificidad puesto que siempre tendremos un selector único para cada regla y de esta la podemos reducir en gran manera (menos repeticiones).
  2. Independencia en la ubicación: podemos mover los bloques a cualquier parte del documento sin que los estilos se trastornan puesto que el bloque se plantea de forma independiente y los elementos solo hacen referencia a este (Independencia absoluta de las clases).
  3. Mejoría en la herencia múltiple: Con cada una de las tres partidas podemos conseguir clases única, tenemos la libertad de cambiar cualquiera de estas sin temor a afectar a los demás.

En fin, la metodología BEM no debe ser considerado como el “Santo Grial” del desarrollo frontend, sino más bien debe ser visto como una guía que nos puede ayudar a organizar nuestro código y flujo de trabajo. Hay otras metodologías que adoptan un enfoque similar como ya sabes, están SMACSS , Atómic CSS y OOCSS etc. 

En lo personal creo que la metodología BEM hará que nuestras hojas de estilo sean comprensible, semánticamente simple y más fácil de mantener, incluso trabajandola por medio de un preprocesador todas sus características se fortalecen.

Comentar

avatar
Ordenar:   Nuevos | Antiguos | Más votados
felipe

tengo una duda los elementos no se pueden usar en otras partes del documento si no que siempre van amarrado a un contexto (bloque)

Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. quibusdam

si quiero usar ese mismo button en otras partes del documento siento que el nombre lo amarra de featured

carlosdgrafico

Esta bastante bueno el post, pero creo estás equivocado en la parte donde dices: que los.elementos no pueden tener dependencias. Trabajo con BEM hace bastante tiempo y cada elemento dentro de un bloque, también es independiente, ya que muchas veces tendremos que reutilizar pequeños fragmentos y lo ideal es no repetir css.

wpDiscuz