BEM – Bloque, elemento y modificador, más que CSS

Todos puede escribir CSS de la forma en que mejor les parezca pero BEM – Bloque, elemento y modificador, más que CSS es una medología y la idea de las metodologías es crear estándares que permitan a los equipos entender el código escrito por alguien más. La regla o ley de pareto aplicada al CSS sería algo como: Pasarás el 80% del tiempo leyendo el código de alguien más y el 20% del tiempo escribiendo. Dicho de otra forma: Invierte mucho en aprender a escribir código claro.

Todos hemos recibido archivos de CSS que con un vistazo encontramos lo que necesitamos y otros que no entendemos cómo es que funcionan.

Qué es BEM

Entonces ¿Qué es BEM? Es una metodología basada en componentes que sirve al desarrollo web.

La idea detrás de la metodología es convertir las complejas interfaces de usuario -UI-  en bloques faciles y rapidos de codear que se puedan reutilizar sin necesidad de copiar y pegar código.

Vale la pena mencionar que BEM bloque, elemento y modificador es más que CSS, se aplica tanto a HTML, JS como a la estructura de archivos del proyecto. Con todo puedes escribir CSS puro o usar Less, Sass y/o Stylus usando BEM.

Bloque

Hablemos un poco de los bloques. Los bloques son “contenedores”. Una funcionalidad independiente de la página que puede ser reutilizada. En HTML se representan por el atributo “class”.

¿Qué característica debe tener para ser un bloque?

  • El nombre del bloque debe describir su propósito. La pregunta a responder es: ¿Qué es? ¿Un botón, un menú?. No deben los bloques responder a estados o forma.
  • El bloque no debe influir en su entorno. Lo que significa que no debe establecer la geometría externa (márgenes) o el posicionamiento del bloque.
  • No se debe usar el selector de tipo ID cuando usamos BEM

Esto garantiza la independencia del bloque y la capacidad de moverlo de un lado a otro sin afectar la forma en que fluye.

¿Podemos anidar bloques? 

Bajo el concepto de que los bloques son independientes y que son contenedores. Los bloques pueden contener bloques y puedes tener cualquier cantidad de niveles.

Bloque - BEM - Bloque, elemento y modificador. Más que CSS

Elemento

Forma parte del bloque y no puede usar usado separado del mismo.

¿Qué características tiene un elemento? 

  • El nombre del elemento describe su propósito. Responde a las preguntas: ¿Qué es? ¿Cuál es el propósito? al igual que los bloques no responden a estados o tamaños.
  • La estructura del nombre de un elemento es: nombre-bloque__nombre-elemento. El nombre del elemento debe estar separado por dos guiones bajos.

Lineamientos de los elementos: 

Anidación: 

  • Los elementos pueden ser a su vez contenedores de elementos.
  • Puede tener cualquier cantidad de niveles.
  • Un elemento es siempre parte del bloque y no de otro elemento. Lo que significa que a la hora de escribir el nombre no es correcto: nombre-bloque__elemento-nombre__elemento-nombre
  • Los nombres de los elementos cuando están contenidos dentro de otro elemento deben mantener su estructura: nombre-bloque__nombre-elemento

En BEM los bloques son una lista plana de elementos.

Parte de o pertenencia: 

Un elemento siempre debe ser parte de un bloque y no debe ser usado de forma separada del mismo.

Elemento opcional:

Un elemento es un componente opcional de los bloques. No todos los bloques tienen elementos.

Elemento - BEM - Bloque, elemento y modificador. Más que CSS

Con todo esto la pregunta es: ¿Debo crear un bloque o un elemento?

Debes crear un bloque si: 

Una sección del código podría ser reutilizada y no depende de otros componentes de la página para ser implementado.

Debes crear un elemento si: 

La sección de código no puede ser utilizada de forma contenedora: El bloque.

La excepción es que el elemento debe ser “dividido” en sub-elemento para simplificar el desarrollo. En la metodología BEM no se crean elementos de los elementos. En ese caso en lugar de crear elementos lo que necesitas es crear un bloque.

Modificador

Un modificador es una entidad o componente que define: color, apariencia, comportamiento de un bloque o elemento.

Características de los modificadores:

El nombre del modificador describe su apariencia. Responde a las preguntas: ¿Qué tamaño? ¿Con qué tema? ¿Activo, enfocado, deshabilitado? ¿Cuál es el comportamiento?

Tipos de modificadores: 

Booleanos: 

utilizados únicamente cuando la presencia o ausencia del modificador es importante y su valor es irrelevante. Por ejemplo: disable (deshabilitado). Si un modificador booleano está presente se asume su valor como true (verdadero).

Los nombres son definidos por un solo guión bajo, de la siguiente forma:

  • nombre_bloque_modificador-nombre
  • nombre-bloque__nombre-elemento_modificador-elemento

De valores clave: 

Usados cuando el modificador tiene un valor importante. Por ejemplo: un menú con el tema de diseño tropical: menu-tropical

La estructura se tendría que ver la siguiente forma:

  • nombre-bloque_modificador-nombre-modificador-valor
  • nombre-bloque__elemento-nombre_modificador-nombre_modificador-valor

Donde modificador-valor responde en el ejemplo a menu-tropical

Modificador - BEM - Bloque, elemento y modificador. Más que CSS

Algunos lineamientos adicionales:

Un modificador no debe estar solo: desde la perspectiva de BEM un modificador no puede ser aislado de un bloque o un elemento. Un modificador debe cambiar: la apariencia, el comportamiento o el estado. Más no reemplazarlo.

Estructura de archivos 

La metodología BEM puede -debe- ser adaptada a la hora de estructurar archivos. La implementación de bloques, elementos y modificadores dividen los archivos de forma independiente lo que nos permite editar bloques de código más pequeños y claros.

Características:

  • Un bloque corresponde a un directorio
  • el bloque y el directorio comparten el mismo nombre, para el bloque “header” la carpeta o directorio  es “header”
  • la implementación de un bloque se divide en archivos de tecnología separados: header.css header.js
  • El directorio del bloque es la raíz para los directorios de elementos y modificadores
  • los nombres de los directorios “elemento” deben comenzar con dos guiones bajos: header/__logo
  • por lo anterior los nombres de los modificadores utilizan solo un guión bajo: header/__logo/_retina

En resumen

Podría parecer intimidante y complejo en un principio pero el orden que BEM brindará a el proyecto será brutal.

Mientras traducía y adaptaba la guía rápida de BEM aprendí mucho. Espero te sirva.

Dejar un comentario