BEM es una de las metodologías mas utilizadas actualmente debido su practicidad frente a otras metodologías y por su capacidad para crear componentes reutilizables y compartir código en el desarrollo web.

Nace de la necesidad de nombrar los elementos a la hora de maquetar un sitio web, estableciendo una convención super fácil, poderosa y simple que permite que tu código sea mucho más fácil de leer y entender.

BEM: Bloque, Elemento, Modificador

BEM es el acrónimo de Block Element Modifier y aunque es bastante simple de implementar, hacerlo te permitirá escalar y mantener grandes proyectos de desarrollo web.

Dentro de un Bloque puedes tener múltiples Elementos que conforman todo un componente, a su vez cada elemento puede necesitar alguna Modificación de si misma dependiendo su funcionalidad.

Esta metodología permite ahorrar tiempo a la hora de nombrar las partes de nuestros componentes y la forma en la que debemos hacerlo es separando cada una de las partes mediante el uso de '__' entre bloque/elemento y de '--' entre bloque/modificador o elemento/modificador.

Bloque

Los nombres de los bloques se pueden nombrar con caracteres alfanuméricos y se recomienda que sea un nombre corto (lo mas corto posible) que te permite identificar qué información/elementos contendrá dicho bloque.

<div class="bloque">…</div>

Elemento

Sigue las mismas reglas de nombramiento de los bloques, y heredan el prefijo separado por un doble guion bajo "__".

Aplica para títulos, logos, menús, formularios, inputs, botones etc.

<div class="bloque">
	<span class="bloque__elemento">…</span>
</div>

Modificador

Sigue las mismas reglas de nombramiento de los anteriores, heredan el prefijo del bloque o elemento que modifican separado por doble guion medio "--".

<div class="bloque">
	<span class="bloque__elemento">
    	<button class="bloque__button--active"></button>
    </span>
</div>

Si el nombre del modificador es demasiado largo puedes hacer la separación utilizando un sólo guion: bloque__elemento--modificador-largo.

Ejemplo

Veamos una calculadora que bien podría ser un widget en una aplicación. La aplicación es bastante simple, la idea es que el usuario incorpore una cantidad en dólares y esta la convertirá a la moneda local.

En HTML simple y plano quedaría de la siguiente manera…

<section>
	<h1>Calculadora de divisas</h1>
    <form action="calcular.php" method="post">
    	<p>Ingrese una cantidad: (Ej. 1USD, $25.00USD)</p>
        <p>
        	<input name="cantidad">
		<input type="submit" value="Calcular">
        </p>
    </form>
</section>

Ahora agreguemos nuestras clases para poder dar estilos a este widget.

<section class="widget">
	<h1 class="widget__header">Calculadora de divisas</h1>
    <form class="widget__form" action="calcular.php" method="post">
    	<p>Ingrese una cantidad: (Ej. 1USD, $25.00USD)</p>
        <p>
        	<input name="cantidad" class="widget__input widget__input--amount">
		<input type="submit" value="Calcular" class="widget__input widget__input--submit">
        </p>
    </form>
</section>

Lo primero que notamos es la asignación de mas alto nivel section la cual será nuestro 'Bloque'. A este bloque le hemos asignado la clase de wigdet y será este el prefijo de los elementos dentro de el.

Lo puedes nombrar como gustes, aunque se busca que sea un nombre que pueda ser identificable (te dice de que va a tratar el contenido dentro) o bien, que puedas identificar su ubicación dentro del documento HTML.

Los elementos que le siguen como lo son el título header, el formulario form y los elementos del formulario input se nombrarán tomando en cuenta el bloque que los contiene.

De esta manera tendríamos los siguiente elementos:

• widget
• widget__header
• widget__form
• widget__input

Importante notar que el rol de los 'modificadores' cae en los elementos de tipo input y hemos utilizado: widget__input--amount y widget__input--submit.

Estos modifican el estado o apariencia de nuestros elementos.

Se recomienda utilizar una clase general que permita estilizar ambos elementos (ambos tiene la misma estructura), pero a su vez tienen pequeñas diferencias que nos evitarán repetir código y tener estilos únicos para cada uno al mismo tiempo.

Establecido todo lo anterior, nuestro código CSS se vería mas o menos así:

.widget {
    background-color: #FC3;
}

.widget__header {
    color: #930;
    font-size: 3em;
    margin-bottom: 0.3em;
    text-shadow: #FFF 1px 1px 2px;
}

.widget__input {
	border-radius: 5px;
    font-size: 0.9em;
    line-height: 1.3;
    padding: 0.4em 0.7em;
}

.widget__input--amount {
    border: 1px solid #930;
}

.widget__input--submit {
    background-color: #EEE;
    border: 0;
}

Conclusión

Nombrar los componentes o establecer comentarios claros en el desarrollo web es una de las cosas que mas quiebran la cabeza cuando vamos empezando.

Muchos cometemos el error que nombrarlos directamente con la funcionalidad y esto impide tomar el mismo componente para otras partes de la aplicación o para otros proyectos.

BEM te permite nombrar los componentes sin tener que complicarte o perder demasiado tiempo en ello. Y una vez lo hemos hecho el trabajo de darle estilos será mucho mas eficiente a la par de que un mismo componente se puede reutilizar en cualquier parte de tu aplicación.