¿Qué es BEM?

Es una metodología de trabajo creada por Yandex para proyectos web grandes o pequeños. El objetivo de BEM es dividir lógicamente las piezas de las que se compone una web. El resultado es un código más escalable y modular y mayor rapidez de desarrollo.

Se puede usar para desarrollar componentes CSS y JS.

#B de Bloque

Un bloque es una pieza de la aplicación que es independiente, reutilizable y extensible. Piensa en ella como una zona que podría convivir fuera del interface y aún ser útil. Por ejemplo:

  • i) un botón
  • ii) un menu de navegación
  • iii) una cabecera
  • iv) un pie

#E de elemento

Un elemento es parte de un bloque, depende de él y no tiene sentido fuera del contexto de su bloque. Por ejemplo:

  • i) ítems de menú de un menú de navegación
  • ii) logo de una cabecera
  • iii) los labels de un campo de formulario

#M de modificador

Los modificadores tienen que ver con la presentación ya sea a través de propiedades o estados pudiendo aplicarlos en bloques o elementos. Podemos clasificar a los mofidicadores dentro de los siguientes grupos:

  • i) modificadores de apariencia (estilos como sombras, bordes, fondos)
  • ii) modificadores para tamaños (tamaño de fuente, anchura, altura)
  • iii) modificadores para posición (derecha, izquierda, final, fijo)

Analizando el proyecto

Antes de comenzar debemos de analizar el proyecto, normalmente con los diseños bastará para una primera aproximación.

Vamos a hacer un estudio del prototipo y para ello hay que detectar los bloques que veamos, los podemos anotar con los nombre que consideremos más se acercan a lo que son y teniendo en mente que los bloques puede vivir por sí mismos, los elementos no.

  • i) ¿Puede vivir un label solo? no, necesita de un campo de formulario al que hace referencia.
  • ii) ¿Puede vivir un input de formulario tipo texto solo? no, para completar su independicia necesita un label que le presente.

Por tanto estos dos elementos son piezas de un conjunto más grande, un bloque que llamaremos .b-text-input. (El prefijo b- es de bloque y se usa para que el desarrollador lea más rápido el código)

%form
  .b-text-input
    %label.b-text-input_label{for:"nombre"} 
      Nombre
    %input.b-text-input_field{type:"text"}
//#Bloque
.b-text-input{
  padding: .5em;
}
//#Elemento
.b-text-input_label{
  //Estilos generales para los labels de los inputs tipo text
  font-weight: 700;
}
//#Elemento
.b-text-input_field{
  //Estilos generales para los inputs tipo text
  padding: .4em;
  border: 1px solid black;
  font-size: 1.1em;
}

¿Tiene sentido?

Aplicando #Modificadores

Cada vez que veamos este elemento en el prototipo lo tendremos ya preparado para ser utilizado y para cambiar su apariencia usaremos los #M modificadores.

//#Modificadores que cambian el skin del campo
.b-text-input_field--alpha{
  border-color: white;
  box-shadow: inset 0px 0px 5px rgba(0,0,0,.6);
  border-radius: 4px;
}
.b-text-input_field--beta{
  border-color: lightgrey;
  box-shadow: inset 0px 0px 15px rgba(0,0,0,.2);
  border-radius: 20px;
}
.b-text-input_field--gama{
  border-color: lightgrey;
}

//#Modificadores que cambian el tamaño del campo
.b-text-input_field--min{
  font-size: .8em;
}
.b-text-input_field--med{
  font-size: 1em;
}
.b-text-input_field--max{
  font-size: 1.2em;
}

See the Pen BEM - Formulario by Davilious (@davilious) on CodePen.

Bien, pues esta es una visión muy general de lo que es BEM, una metodología cada vez más usada y flexible para que la vida del desarrollador sea más fácil. Como en todo la práctica hace al maestro y nada mejor que analizar cosas que veamos por ahí e intentar escribirlas usando BEM. Si hay alguna duda concreta el equipo de Bem pone a disposicón un correo para contactar info@bem.info, todo un detalle por su parte.

Seguiremos con BEM en próximos artículos.

¡Feliz código!