33

馃殌 C贸mo implementar BEM en tus proyectos Front-End

驴Te has sentido frustrado cuando tus proyectos front-end comienzan a crecer y no sabes por d贸nde deber铆as comenzar? Imagina poder tener el control total de c贸mo poder escalar, mantener y reutilizar tu c贸digo HTML y CSS. Para eso existe la metodolog铆a BEM y si a煤n no conoces esta forma 谩gil de trabajo no te preocupes, a continuaci贸n, te explico.

驴Qu茅 es BEM? 馃

La metodolog铆a BEM 鈥 Modificador de Elemento de Bloque (Block Element Modifier) por sus siglas en ingl茅s, nos permite construir estructuras tipo componentes que podamos escalar y reutilizar en nuestro layout, adem谩s, si combinas BEM con alguna arquitectura CSS como SMACSS, ITCSS o Atomic Design seguramente lo amar谩s.

Bloque 馃摝

Es el contenedor principal de nuestro componente, por lo general son aquellas secciones de nuestra p谩gina que podemos f谩cilmente identificar como el header, main, section, aside o footer, pero en la pr谩ctica podemos crear un bloque en cualquier parte, siempre y cuando lo consideremos necesario como puede ser un modal, un pop-up o un formulario de contacto.

Para nombrar a un bloque, debemos crear una clase con la siguiente nomenclatura:

.block {}

Elemento 馃摌

Los elementos son aquellas piezas que componen la estructura de un bloque, est谩n sem谩nticamente relacionadas, por ejemplo; los enlaces de un men煤, elementos de una lista o im谩genes de un carrusel.

La nomenclatura para nombrar la clase de un elemento, deber谩 hacer referencia al bloque y le agregar茅mos dos guiones bajos, seguido del nombre del elemento:

.block__element {}

Modificador 馃摌馃摋

El modificador es la parte m谩s interesante de BEM ya que nos permite cambiar la apariencia y el estado de un bloque o elemento. Esto es muy importante porque si nos encontramos en un escenario donde un men煤 contiene un grupo de enlaces y uno de ellos necesita tener mayor foco de atenci贸n para alentar al usuario a realizar un call to action, el modificador nos permitir谩 煤nicamente modificar la visualizaci贸n o comportamiento que deseamos aplicar a este elemento sin perder las propiedades que comparte con los otros.

Se recomienda utilizar la siguiente nomenclatura para nombrar las clases de los modificadores, utilizar茅mos el nombre del bloque o elemento a modificar y le agregaremos dos guiones medios, seguido de su identificador:

.block--modifier {}

Manos a la obra 馃憡

Ahora que ya sabes como funciona BEM, seguramente tienes muchas ganas de implementarlo en tus proyectos front-end, vamos a realizar un ejercicio pr谩ctico que nos permitir谩 familiarizarnos m谩s con esta metodolog铆a. Para ello, te propongo logremos identificar cual ser铆a el bloque, elemento y modificador del siguiente encabezado.

header.png

驴Lograste identificarlos? Para poder construir este componente, vamos a utilizar la etiqueta header, ya que sem谩nticamente es una buena pr谩ctica en nuestro HTML y nombraremos este bloque con la clase header, de esta manera ser谩 muy f谩cil identificarlo en un futuro.

<header class="header"></header>

Trabajemos en agregar los elementos de nuestro bloque header, como pudiste darte cuenta, en el encabezado tenemos tambi茅n un logotipo, un men煤 y un carrito de compras. Vamos a crear estos elementos dentro de nuestro bloque.

<header class="header">
    <imgclass="header__logo"src="/assets/images/logo.svg"alt="Logotipo"><navclass="header__menu"><ulclass="menu__list"><liclass="menu__item">Inicio</li><liclass="menu__item">Nosotros</li><liclass="menu__item">Inicia Sesi贸n</li><liclass="menu__item">Contactar</li></ul></nav><spanclass="header__cart"></span></header>

Probablemente te estas preguntando, por qu茅 el elemento hijo de la clase header__menu se llama menu__list, d茅jame decirte que BEM no est谩 escrito sobre piedra, la metodolog铆a nos da la flexibilidad de poder nombrar nuestras clases con base a las necesidades de nuestro componente, siempre y cuando tengan coherencia y relaci贸n entre s铆.

Para terminar, agreguemos el modificador que se encuentra en el enlace contactar y as铆 poder cambiar su visualizaci贸n.

<header class="header">
    <imgclass="header__logo"src="/assets/images/logo.svg"alt="Logotipo"><navclass="header__menu"><ulclass="menu__list"><liclass="menu__item">Inicio</li><liclass="menu__item">Nosotros</li><liclass="menu__item">Inicia Sesi贸n</li><liclass="menu__item menu__item--contact">Contactar</li></ul></nav><spanclass="header__cart"></span></header>

Conclusiones 馃幆

Como bien te diste cuenta, crear un componente fue muy sencillo y lo m谩s importante es que si necesitas escalarlo, lo podr谩s hacer muy f谩cilmente, adem谩s, al trabajar de esta manera, mejoras la especificidad de tu CSS, mejoras la herencia de tus estilos, puedes reutilizar c贸digo y respetas la autonom铆a de los bloques.

Ahora te propongo que le agregues los estilos necesarios para que se logre ver como en la imagen que te compart铆.

Si est谩s leyendo este art铆culo, probablemente est茅s tomando el Curso de Responsive Design: Maquetaci贸n Mobile First, si no lo has hecho, 隆驴qu茅 est谩s esperando?! Recuerda que tambi茅n puedes tomar el Curso Definitivo de HTML y CSS para reforzar tus buenas pr谩cticas de desarrollo front-end y as铆 seguir avanzando en tu carrera profesional con el Curso de Frontend Developer donde podr谩s ver m谩s informaci贸n sobre Arquitecturas CSS.

#NuncaParesDeAprender 馃挌馃

Escribe tu comentario
+ 2
Ordenar por:
2
12822Puntos

S煤per util el art铆culo. Gracias!
Me ayud贸 a entender mejor BEM sin necesidad de leer un mont贸n de documentaci贸n 馃槃

1
39032Puntos
un a帽o

Hola, Jos茅,

Me alegra mucho saber que te sirvi贸 el art铆culo, cualquier duda que tengas no dudes en escribirme.

#NuncaParesDeAprender 馃挌馃

2

El puto amo. Por fin entend铆.

1
39032Puntos
3 meses

Hey, Jesus.

Me alegra mucho saber que te sirvi贸 el art铆culo, cualquier duda que tengas no dudes en escribirme.

#NuncaParesDeAprender 馃挌馃

1
10263Puntos

隆Excelente aporte! Apenas acabo de verlo, desp煤es de haber buscado info por internet, ya que en el curso el Profe Diego uso en algunas clases la metodolog铆a BEM de manera incorrecta. Ya me hab铆a quedado claro como usar BEM pero me tomo tiempo compr茅nderlo, este tutorial me 隆hubiera ahorrado tiempo!
P.D. BEM se cre贸 para facilitar la creaci贸n de componentes para la reutilizaci贸n de c贸digo, a mi parecer, sacrificando un poco la estructura html al tener que agregarle clases a la mayor铆a de los elemento html. Por eso el Profe Diego solo toma como referencia BEM.

1
39032Puntos
7 meses

Hola,Checo,

Me alegra mucho saber que te sirvi贸 el art铆culo, tampoco soy purista de utilizar BEM al 100% en mis proyectos, pero considero que en el curso no se utiliz贸 apropiadamente.

#NuncaParesDeAprender 馃挌馃

1

隆Excelente tutorial, Erwin! Me qued贸 todo muy claro.

1
39032Puntos
7 meses

Hola, Mauricio,

Me alegra mucho saber que te sirvi贸 el art铆culo, cualquier duda que tengas no dudes en escribirme.

#NuncaParesDeAprender 馃挌馃

0
44482Puntos

Gracias hermano, se agradece el aporte

1
39032Puntos
un a帽o

Hola, Onedrako,

Que bueno que te sirvi贸 este art铆culo, si tienes alguna duda sobre c贸mo implementarlo en tus proyectos escr铆beme por Twitter @erwinfriasmtz

#NuncaParesDeAprender 馃挌馃

0
36575Puntos

Gracias, me ahorr贸 un mont贸n de documentaci贸n. Lo aplicar茅 en mis proyectos.

2
39032Puntos
un a帽o

Hola, Axl Yaguana,

Que bueno que te sirvi贸 este art铆culo, si tienes alguna duda sobre c贸mo implementarlo en tus proyectos escr铆beme por Twitter @erwinfriasmtz

#NuncaParesDeAprender 馃挌馃

0
-6Puntos

Hola me gusto mucho,pude entenderlo muy f谩cilmente,muchas gracias por tu aporte .

0
39032Puntos
un a帽o

Hola, Alejandro,

Como pudiste ver, es muy f谩cil implementar BEM en nuestros proyectos y con forme te vayas familiarizando m谩s con esta metodolog铆a podr谩s crear tu propia gu铆a de trabajo.

#NuncaParesDeAprender 馃挌馃