Con el ánimo de evitar conflictos al momento de realizar nuestro código con HTML y  CSS, abordaremos en este blog la poderosa metodología de frontend: BEM.

BEM es un enfoque basado en componentes para el desarrollo web ( Bloque, Elemento, Modificador ). Su objetivo es dividir la interfaz de usuario en bloques independientes para que sudesarrollo sea fácil y rápido. Ellopermite, además, la reutilización del código existente sin copiar y pegar.

La estructura normal de una página WEB se vería así: 

<sección clase="imagen-texto"> 

<div class="contenedor"> 

<div clase="fila"> 

<div clase="col-sm-6"> 

<h2 class="title">Lorem ipsum dolor< /h2> 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima consequatur impedit facere sit aut, exercitationem supuestos, quos odit animi, earum quam distintio debitis. 

<button class="btn">Más información</button> 
</div> 

</div> 

</div> 

</sección>

Pero, una estructuración con BEM , a sí :

<sección clase="imagen-texto"> 

<div class="contenedor"> 

<div class="fila imagen-texto__contenido"> 

<div clase="col-sm-6"> 

<h2 class="image-text__title" >Lorem ipsum dolor</h2> 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima consequatur impedit facere sit aut, exercitationem supuestos, quos odit animi, earum quam distintio debitis. 

<button class="image-text__btn ">Más información</button> 
</div> 

</div> 

</div> 

</sección>

Definición de los componentes BEM

1. bloque

Un bloque en BEM es el contenedor padre de varios elementos. En el ejemplo anterior nuestro bloque vendría siendo la sección que tiene como clase imagen-texto.

Ejemplo:

<sección clase="nombre-de-bloque"> 
</sección>

2. elemento

Un elemento en BEM es la parte compuesta de un bloque que no se puede utilizar por separado, ya que todo elemento debe tener como padre un bloque.

En nuestro ejemplo anterior, los elementos serían el título, el texto y el botón.

Ejemplo:

<sección clase="nombre-de-bloque"> 

<h2 class="nombre-bloque__elemento1">Lorem ipsum dolor</h2> 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus minima consequatur impedit facere sit aut, exercitationem supuestos, quos odit animi, earum quam distintio debitis. 

<button class="block-name__element3">Más información</button> 
</sección>

3. Modificador

Un modificador en BEM es una entidad que define la apariencia, estado o comportamiento de un bloque o elemento.

Ejemplo:

En este ejemplo mostraremos como usar un modificador ( «disabled» ) en un elemento con estilo específico. 

<sección clase="nombre-de-bloque"> 
<button class="block-name__element block-name__element_disabled ">Más información</button> 
</sección>

En SASS, por ejemplo, los estilos serían:

.nombre-bloque{ 
     &__elemento1{ 
     &_desactivado{} 
     } 
     &__elemento2{} 
     &__elemento1_deshabilitado{} 
}

Conclusión: 

Las estructuras presentadas aquí tienen un CSS reutilizable y organizado. Por tanto, el HTML es fácil de entender para cualquier miembro del equipo, ello evita que se sobrescriban estilos por falta de conocimiento de cada elemento. 

En conclusión, La metodología BEM ayuda a reducir el conflicto en los equipos a la hora de realizar el código, en tanto que aclara, de una forma amigable, los elementos que lo conforman.