arrowBlog
25.11.2016
Metodología BEM: Cómo optimizar el trabajo del front-end

Como ya sabemos, para el correcto desarrollo de un proyecto web se deben tener en cuenta muchos factores, algunos de ellos que afectan a todo el proyecto, como la marca o el diseño, y otros más específicos. En esta ocasión hablaremos de un factor que afecta exclusivamente a la parte de desarrollo: la estandarización de procesos en desarrollo front-end.

Hoy en día, los sitios web son cada vez más complejos y ya no basta con que el sitio funcione, sino que también es necesario que tenga un código web limpio y ordenado, que sea fácil de entender, mantener y evolucionar.

Para que los códigos de programación cumplan estas premisas es recomendable definir unos patrones o reglas que permitan trabajar en nuestro proyecto web de manera fácil y ágil. Y ello es posible gracias a metodologías de programación como BEM.

Metodología BEM

BEM (Block Element Modifier), como tal, es una convención de naming (nombrado) de clases independientes que hace que las hojas de estilo y HTML sean más simples, fáciles de entender y de mantener. Se trata de una metodología web dada por:

1) BLOQUES: Entidad independiente y con sentido en sí misma (ej: formulario, input, contenedor, pie de página, cabecera de la web, etc.).

2) ELEMENTOS: Cada una de las piezas dependientes del bloque y sin sentido fuera del mismo (ej: elemento de menú, título, etiqueta, etc.).

3) MODIFICADORES: Usados para cambiar la apariencia o el comportamiento, tanto de bloques como de elementos.

Esta metodología de desarrollo de sitios web se basa en dividir la web en bloques encapsulados independientes que no dependen de la estructura de la web en sí misma, dando lugar a porciones de código que se puede repetir y reutilizar en todo el site, como por ejemplo un formulario de contacto, un menú, o un listado.

 

¿Por qué BEM?: Un ejemplo práctico

El mantenimiento de las hojas de estilo CSS en sitios web complejos no siempre es fácil. En estos casos, la metodología BEM permite trabajar de manera conjunta con un preprocesador de CSS, Less, Sass. Veamos las ventajas de esta manera de trabajar.

Imaginemos una página de inicio estándar con una zona en la parte superior de la web con el árbol de navegación, una zona central con un listado de ofertas y una zona en la parte inferior pie con los botones sociales.

Sin hacer uso de la metodología BEM, optaríamos por generar:

1) El menú en la cabecera

2) El listado de ofertas en el cuerpo (zona central)

3) Los enlaces a redes sociales en el pie

Esta estrategia genera dependencias entre la estructura y los diferentes contenidos (ej: el menú dependerá de la cabecera, el listado de ofertas del cuerpo y el submenú del pie). En este ejemplo, el código de programación sería "correcto" aunque poco flexible. ¿Qué pasa si el cliente solicita que los iconos sociales se cambien del pie a la cabecera?. Debido a la dependencia de los iconos sociales con el pie, la única opción es reescribir el código con el correspondiente coste en tiempo (codificación + testeo).

En el supuesto en el que combináramos BEM con el uso de un preprocesador de hojas de estilo, se generarían diversos bloques por cada uno de los elementos necesarios: bloque cabecera, bloque menú, bloque contenido, bloque pie, bloque RRSS.

Así, estructura y contenido serían totalmente independientes, y ante la solicitud del cliente de cambiar los iconos sociales de lugar, sería suficiente con copiar el código del bloque correspondiente y pegarlo en la zona deseada, sea cabecera, pie o cuerpo. Así queda patente la gran flexibilidad que ofrece esta solución.

 

Otras ventajas y recomendaciones

Si utilizamos esta metodología de programación de manera correcta tendremos selectores únicos con lo que eliminamos problemas de herencia, ya que los bloques no tendrán dependencias de estilos en otros elementos ni estructura. Así, podríamos copiar un bloque a un proyecto nuevo o moverlo dentro del mismo sitio.

Además, el hecho de construir un bloque de manera independiente nos permite escribir menos código y nos permite crear una librería de bloques (reutilizables) con el consiguiente ahorro en tiempo.

Otro tema muy importante para la óptima implementación de la metodología BEM es el nombrado de clases, evitando utilizar nombres demasiado específicos que hagan referencia a posiciones (izquierdo, menuSuperior) o colores (texto-gris), ya que nuestros bloques siempre serán independientes.

Un buen nombrado de clases facilita la lectura del código y encontrar de manera más rápida cualquier archivo, y sobre todo, contribuye al trabajo en equipo, permitiendo que todos los programadores front, incluso los recursos nuevos, puedan entender de manera fácil el proyecto.

A modo de conclusión podríamos señalar que la implementación de una metodología de este tipo lleva tiempo, pero que sobradamente se amortiza en términos de calidad, retorno de la inversión y mantenimiento, haciendo más ágiles las modificaciones, ganando en solidez del proyecto y, lo que es más importante, haciendo más feliz al equipo de desarrollo y mantenimiento ;).

Finalmente, si has tenido problemas a la hora de gestionar tus proyectos Front End y necesitas asesoramiento, contacta con nosotros y trabajamos codo con codo. ¡Te esperamos!

 

 

Patterson - Carlos de la Orden
A tu lado como: Desarrollo Front-End

Imágenes: freepik.com

Artículos relacionados
Esta web utiliza cookies propias y de terceros para mejorar tu experiencia de navegación y realizar tareas de analítica. Al continuar con tu navegación entendemos que aceptas nuestra política de cookies.