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

¡Hola! Entonces, ¿desea 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 B lock E lement y M odifier.

¿Qué es BEM?

BEM es una metodología de diseño que le 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 le 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.

Ahora ya 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 ser independiente y aún así tener sentido. Ejemplos de bloques son header, input, y checkbox. 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 elimináramos el texto que etiqueta una entrada de radio y lo pusiéramos por sí solo, ya no tendría sentido.

Mira este:

Si la parte que se describe se divide 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á algún 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 ver 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 un 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 de la captura de pantalla anterior se vería así:

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

El elemento option__noteahora es un bloque note. Eso significa que podríamos buscar notefuera del optionbloque 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 da 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:

De forma predeterminada, el botón es blanco con un texto azul. Para obtener una variación, agregamos una button--greenbandera, que luego hace que el botón sea verde con un texto blanco.

De acuerdo con las reglas de BEM, nuestra bandera button--greentiene un "efecto secundario" que puede generar confusión sobre cuál es la box-shadowpropiedad. 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 un box-shadow. Si alguna vez lo hacemos, podemos romper la bandera:

Ahora, cuando necesitemos un botón verde con una sombra de cuadro, solo agregaremos la button--greenbandera. Lo mismo se aplica a la colorpropiedad.

Conclusión

BEM es una forma muy agradable 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 brindarle una comprensión sólida de la metodología. Puede 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 es así, no dudes en dejar un comentario y unos aplausos.

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