BEM: METODOLOGÍA MODULAR PARA CSS

Mar 12, 20165 Comentarios

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.

Hace 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.
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.

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.
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 {}
CSS
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 {...}
CSS
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>
HTML
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>

HTML
 Veamos el resultado de los anteriores botones mezclando los modificadores
disponibles:
 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>
HTML
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.