Una introducción rápida a los modificadores de elementos de bloque (BEM)

Modificador de elemento de bloque

¡Hola! Entonces, ¿quieres obtener una mejor comprensión de BEM? Supongo que si estás leyendo esto, es posible que no sepas qué significa BEM. En caso de que no lo haga, es una abreviatura de Elemento de bloque y Modificador.

¿Qué es el BEM?

BEM es una metodología de diseño que lo ayuda a crear componentes reutilizables y compartir código en el desarrollo front-end. - getbem.com

Esto significa que BEM es un sistema de métodos que lo ayuda a escribir su código HTML y CSS para que sea fácil de reutilizar y compartir con otras partes de su código.

BEM en acción.

Entonces, ahora conoce la definición de BEM, pero es posible que no sepa cómo se ve o cómo funciona. Como dije anteriormente, BEM es una abreviatura, así que echemos un vistazo a cada una de esas palabras y lo que significan.

Bloquear

Un "bloque" se refiere a cualquier entidad que puede estar sola y tener sentido. Ejemplos de bloques son encabezado, entrada y casilla de verificación. Ejemplos de cosas que no son bloques son títulos de encabezado, un elemento en una lista o una etiqueta para una casilla de verificación.

Si eliminamos el texto que etiqueta una entrada de radio y lo colocamos solo, ya no tendrá sentido.

Mira este:

Si la parte que se describe se separa en bloques individuales, ya no tendrían ningún sentido para el usuario.

Esta es una verdadera separación en bloques:

Si eliminé cualquiera de estos bloques y lo tiré, el otro bloque aún tendrá sentido para el usuario. Sin embargo, en este caso, no será útil para el usuario porque es un botón de opción en lugar de una casilla de verificación.

Es importante considerar un bloque como cualquier combinación (o una sola etiqueta HTML) de varios elementos (u otros bloques) de una manera que tenga sentido para el usuario cuando se coloca solo.

Elementos

Un Elemento debería ser un poco más fácil de entender ahora, ya que lo expliqué cuando hablé de Bloques. Las partes de un bloque que no tienen significado semántico fuera del bloque son elementos.

Veamos esto de nuevo:

Las partes resaltadas son elementos porque ayudan a definir qué es el bloque.

El código para la captura de pantalla anterior se vería así:

Tenemos tres elementos que conforman el bloque de opciones: option__text, option__radio-button, option__note. Sin embargo, podríamos cambiar uno de estos elementos en un bloque propio:

El elemento option__note ahora es una nota de bloque. Eso significa que podríamos encontrar notas fuera del bloque de opciones de una manera que sea útil para el usuario.

Modificador

Un modificador es una bandera que cambia la apariencia o el comportamiento de un bloque o elemento. Por ejemplo:

Los dos botones son el mismo bloque, pero se ven diferentes. El poder que nos brinda BEM nos permite usar el mismo bloque dos veces y aún así tener un aspecto muy diferente.

Veamos cómo se ve el código para eso:

Por defecto, el botón es blanco con un texto azul. Para obtener una variación, agregamos un botón: bandera verde, que luego hace que el botón sea verde con un texto blanco.

De acuerdo con las reglas de BEM, nuestro botón de marca: el verde tiene un "efecto secundario" que puede generar confusión, que es la propiedad de sombra de cuadro. Nuestra bandera hace algo que su nombre no nos dice. Pero está bien, porque, en nuestro pequeño proyecto, nunca tendremos un botón verde con una sombra de cuadro. Si alguna vez lo hacemos, podemos romper la bandera:

Ahora, cuando necesitamos un botón verde con una sombra de cuadro, solo agregaremos el botón: bandera verde. Lo mismo se aplica a la propiedad de color.

Conclusión

BEM es una muy buena manera de escribir y estructurar su código HTML y CSS. Esta guía no cubre el 100% de todo BEM, pero debería ser suficiente para darle una comprensión sólida de la metodología. Puedes leer más sobre BEM aquí.

Espero que haya aprendido algo de esto y que comprenda mejor BEM y cómo se ve en el mundo real. Si lo hace, no dude en dejar un comentario y algunos aplausos.

¿Tiene alguna pregunta? Puedes enviarme un DM en twitter @THEozmic.