Aunque CSS y HTML son dos de los elementos más importantes, no solo basta con saberlos, y más si trabajamos en un equipo de desarrollo, ya que suele existir conflictos al momento de realizar nuestro código.Para ello en este blog hablaremos acerca de una poderosa metodología de frontend:

BEM (Block, Element, Modifier) es un enfoque basado en componentes para el desarrollo web. La idea detrás de ella es dividir la interfaz de usuario en bloques independientes. Esto hace que el desarrollo de interfaces sea fácil y rápido incluso con una interfaz de usuario compleja, y permite la reutilización del código existente sin copiar y pegar.

Estructuración normal de una página WEB:

<section class="image-text">

<div class="container">

<div class="row">

<div class="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 assumenda, quos odit animi, earum quam distinctio debitis.

<button class="btn ">More Info</button>
</div>

</div>

</div>

</section>

Estructuración con BEM:

<section class="image-text">

<div class="container">

<div class="row image-text__content">

<div class="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 assumenda, quos odit animi, earum quam distinctio debitis.

<button class="image-text__btn ">More Info</button>
</div>

</div>

</div>

</section>

Bloque: un bloque en BEM es el contenedor padre de varios elementos. En el ejemplo anterior nuestro bloque vendría siendo el section que tiene como clase image-text.

Ej:


<section class="block-name">
</section>

Elemento: un elemento en BEM es 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 vendrían siendo el título,el texto y el botón.

Ej:


<section class="block-name">

<h2 class="block-name__element1">Lorem ipsum dolor</h2>

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

<button class="block-name__element3 ">More Info</button>
</section>

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

Ej:En este ejemplo mostraremos como usar un modificador en un elemento, donde el botón tiene el modificador “disabled”, esto es para aplicarle un estilo específico a este elemento.


<section class="block-name">
<button class="block-name__element block-name__element_disabled ">More Info</button>
</section>

En SASS, por ejemplo, los estilos estarían definidos así:

.block-name{
     &__element1{
     &_disabled{}
     }
     &__element2{}
     &__element1_disabled{}
}

En las estructuras anteriores podemos ver que nuestro CSS queda más organizado y es reusable, y que nuestra estructura HTML es fácil de entender. Así todos los miembros de nuestro equipo van a saber a que hace referencia cada elemento y no se va a estar sobreescribiendo estilos. La metodología BEM ayuda a que tu y tu equipo se entiendan de una forma más amigable y que no exista ningún conflicto a la hora de realizar código, siempre y cuando tu y tu equipo sigan las reglas básicas de BEM.