Qué es BEM (Bloque, Elemento, Modificador) y cómo se puede utilizar con Drupal Emulsify Twig

Publicado: 2022-11-08

Cuando se trabaja con tecnologías y software de código abierto, es aún más importante simplificar el esfuerzo necesario para leer y comprender el código. Una buena convención de nomenclatura lo ayuda a resolver problemas más grandes en lugar de centrarse en la sintaxis y las preferencias de estilo durante las revisiones de código. Los desarrolladores experimentados entienden la importancia de un código bien escrito y organizado cuando trabajan con sitios web más grandes con toneladas de elementos de estilo.

La metodología BEM (Bloque, Elemento, Modificador) es una convención de nomenclatura ampliamente utilizada para clases CSS que está ganando popularidad debido a la facilidad de uso que ofrece. El concepto fundamental de BEM es el desarrollo web basado en componentes. BEM hace que el desarrollo de la interfaz sea fácil y rápido, especialmente cuando maneja proyectos grandes con una interfaz de usuario compleja. Exploremos más sobre BEM y cómo puede funcionar con el módulo Drupal Emulsify Twig.

Que es BEM

La metodología BEM se introdujo para ayudar a que las clases de CSS sean más fáciles de acceder, comprender y escalar. Puede acelerar el proceso de desarrollo y ayuda a construir componentes reutilizables.

BEM incluye tres partes:

  1. Bloquear
  2. Elemento
  3. modificador

Bloquear

Los bloques son el componente más externo y funcionalmente independiente y son reutilizables. Ejemplos: encabezado, pie de página, barra lateral, menú, contenido, etc.

Características:

  • Los nombres de los bloques siempre deben reflejar el propósito del bloque.
  • Los bloques no deben usar margen o posición. Si necesita agregar margen o posición, debe aplicarlo a los contenedores internos.
  • No use etiquetas CSS o selectores de ID cuando use BEM.

Ejemplo:

 <div class=”icon-button”></div>

Elemento

Los elementos son elementos secundarios de un bloque. Cada elemento puede tener solo un bloque y no puede usarse fuera de él. Ejemplos: elementos de menú, elementos de lista, campo de entrada, etc.

Características:

  • El nombre del elemento (clase) debe describir su propósito (título, título) y no su estado (pequeño/rojo).
  • El elemento y el bloque se separan con un doble guión bajo (__). Así: nombre-bloque__nombre-elemento.

Ejemplo:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

modificador

Un nombre de clase a través del cual puede definir la apariencia, el estado o el comportamiento de un bloque o elemento. Ejemplos: rojo, grande, inhabilitado, fijo, etc.

Características:

  • El nombre del modificador describe su apariencia. Por ejemplo, si la apariencia es "_grande", entonces la clase de modificador será como icon-button__title_large .
  • El modificador está separado del bloque o elemento por un solo guión bajo (_).

Ejemplo:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

Tipos de modificadores

1. booleano

Puede verificar la condición del valor booleano y configurarlo en una variable. Esta variable puede pasar como un valor modificador.

2. Clave-valor

La estructura del nombre completo del modificador con clave-valor seguirá uno de estos patrones:

  1. bloque-nombre_modificador-nombre_modificador-valor
  2. bloque-nombre__elemento-nombre_modificador-nombre_modificador-valor

Convenciones de nomenclatura: reglas y esquemas

Hay diferentes esquemas de nombres. Todos los esquemas tienen algunas reglas comunes como:

  • Los nombres están escritos en letras latinas minúsculas.
  • Las palabras están separadas por un guión (-).

1. Esquemas de nombres clásicos

El esquema de nomenclatura clásico es el esquema de nomenclatura predeterminado de BEM.

Nombre-bloque__nombre-elemento_nombre-mod_valor-mod

  • El nombre del elemento y el nombre del bloque están separados por un doble guión bajo (__).
  • El nombre del modificador y el nombre del bloque o elemento están separados por un solo guión bajo (_).
  • El valor del modificador y el nombre del modificador están separados por un solo guión bajo (_).

2. Estilo de nomenclatura de dos guiones

nombre-bloque__nombre-elemento--nombre-mod--val-mod

  • El elemento y el nombre del bloque están separados por un doble guión bajo (__).
  • El bloque y el elemento están separados por un guión doble (--).
  • El valor de un modificador y el modificador están separados por un guión doble (--).

3. Estilo de nomenclatura de CamelCase

blockName-elemName_modName_modVal

  • Cada palabra después de la primera palabra comienza con una letra mayúscula.
  • Los bloques, elementos y modificadores se usan de la misma manera que en el esquema de nombres estándar.

4. Reaccionar estilo de nomenclatura

BlockName-ElemName_modName_modVal

  • El nombre del bloque y los nombres de los elementos comienzan con una letra mayúscula.
  • El nombre del modificador comienza con una letra minúscula.
  • El nombre de un elemento y el nombre del bloque están separados por un solo guión (-).
  • Los nombres y valores de los modificadores se separan de la misma forma que en el esquema estándar.

BEM en Drupal con módulo Emulsify Twig

En Drupal, podemos usar la función BEM Twig con la ayuda del módulo Emulsify Twig. La función BEM le permite crear clases BEM en elementos de los componentes. A continuación se mencionan algunas extensiones BEM Twig y su uso.

1. Nombre de bloque simple (argumento requerido):

<div {{ bem('icono') }}>

Esto crea:

<div clase="icono">

2. Bloque con modificadores:

Si desea agregar varios modificadores, puede hacerlo mediante una matriz.

<div {{ bem('icono', ['pequeño', 'rojo']) }}>

Esto crea:

<div class="icono icono-–icono pequeño-–rojo">

3. Elemento con modificadores y nombre de bloque (opcional):

<div {{ bem('icono', ['pequeño', 'rojo'], 'icono-botón') }}>

Esto crea:

<div class="icono-botón__icono icono-botón__icono--pequeño icono-botón__icono--rojo">

4. Elemento con nombre de bloque, pero sin modificadores (opcional):

<div {{ bem('icono', '', 'icono-botón') }}>

Esto crea:

<div class="icono-boton__icono">

5. Elemento con nombre de bloque, modificadores y clases extra:

<div {{ bem('icono', ['pequeño', 'rojo'], 'icono-botón', ['js-clic', 'algo-más']) }}>

Esto crea:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red js-click something-else">

6. Elemento solo con clases adicionales (opcional):

<div {{ bem('icono', '', '', ['js-clic']) }}>

Esto crea:

<div class="icono js-clic">

Añadir atributos Twig Extension

La función Agregar atributos Twig le permite agregar atributos HTML a los elementos de sus componentes. Eche un vistazo a algunas de las funciones Agregar atributos a continuación:

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

Pensamientos finales

La metodología BEM es extremadamente útil para los desarrolladores que desean escribir y mantener un código de mejor calidad que pueda ser fácil de entregar y comprender. Cada elemento tiene un propósito que se puede identificar fácilmente por su nombre y de qué bloque proviene. Cuando se usa correctamente, verá que el uso de BEM puede aumentar la velocidad de desarrollo. Si le gustó lo que leyó, suscríbase a nuestro boletín semanal donde le enviaremos información fresca y actualizada directamente a su bandeja de entrada.