BEM: la mejor manera de nombrar tus clases de HTML

Encontrar el nombre apropiado para la clase de tu etiqueta HTML puede que te haya tomado más tiempo de lo que imaginabas. Es común perderse pues quieres usar el que describa bien su funcionalidad, pero también que sea lo suficientemente general para no tener que escribir más líneas de CSS de las necesarias.

BEM (Block, Element, Modifier) es la metodología que se usa para nombrar los elementos de una página web, seguir las convenciones que propone te dará la oportunidad de usarlos de forma modular e independiente, lo que te permitirá reutilizar estilos al máximo.

Las piezas fundamentales de BEM son los bloques; dependiendo del autor, también podrían ser llamados componentes u objetos. La funcionalidad de estos bloques es completamente independiente de su contexto, es decir, si algo se modifica no tiene por qué afectar el contenido del bloque.

Tomemos como ejemplo el formulario de inicio de sesión de Platzi:

Este formulario podría presentarse de diversas formas, tener un botón más o incluso un color distinto, pero su estructura siempre será la misma. Además, podría ser colocado en cualquier parte de tu página, lo que significa que este es un bloque.

Bloques y elementos

La primera convención de nombramiento de BEM indica que los bloques serán definidos en el nombre de la clase, este tiene que describir el propósito del bloque, no su aspecto ni su estado; deberías contestar la pregunta: ¿Qué es esto?

La clase va a llevar la siguiente estructura: class="block-name". El formulario que te mostré antes podría llevar el nombre "form" o "login-form". Es importante destacar que el bloque no debería influenciar su contexto, por lo que no tendrá un margin.

Cada uno de los inputs y textos que el formulario tiene dependen de este bloque, no pueden existir por sí solos, esto los convierte en elementos del bloque "login-form".

El nombre de los elementos debe describir su propósito; tienes que usar la estructura: class="block-name__element-name". El nombre del elemento y el del bloque se separan con dos guiones bajos ( __ ); recuerda siempre anidar los elementos dentro de su bloque.

Ejemplo:

<!-- El bloque "login-form" --><formclass="login-form"><!-- Elemento "input" del bloque "login-form" --><inputclass="login-form__input"><!-- Otro elemento "input" del bloque "login-form" --><inputclass="login-form__input"></form><!-- Esto es incorrecto porque este elemento
 no está dentro de su respectivo bloque --><inputclass="login-form__input">

Siguiendo con el ejemplo del formulario, hay un botón que podrías reutilizar en cualquier otra parte, por lo que este botón es otro bloque. Es posible anidar bloques dentro de otros bloques, así como elementos dentro de otros elementos. Dicho esto, puedes anidar el bloque "button" dentro del bloque "login-form".

Ejemplo:

<!-- El bloque "login-form" --><formclass="login-form"><!-- Elemento "input" del bloque "login-form" --><inputclass="login-form__input"><!-- Otro elemento "input" del bloque "login-form"   --><inputclass="login-form__input"><!-- El bloque "button" dentro del bloque "login-form" --><buttonclass="button">Inicia sesión</button><divclass="login-form__register"><!-- Elemento anidado dentro de otro elemento --><spanclass="login-form__text"></span><buttonclass="button">Regístrate</button></div></form>

Cabe mencionar que un elemento siempre es parte de un bloque, mas no de otro elemento, por lo que no puedes jerarquizar de la forma: block__element1__element2.

Por ejemplo:

<!-- Correcto --><formclass="login-form"><!-- Elemento "register" --><divclass="login-form__register"><!-- Elemento "text" --><spanclass="login-form__text"></span></div></form><!-- Incorrecto --><formclass="login-form"><!-- Elemento "register" --><divclass="login-form__register"><!-- Se recomienda "login-form__text" o "login-form__register-text" --><spanclass="login-form__register__text"></span></div></form>

Ahora que tus clases están apropiadamente nombradas probablemente te preguntes ¿cómo es que hay un botón verde y otro blanco con borde azul si solo tengo una clase? Pues aquí es donde entran los modificadores.

Modificadores

Definen el comportamiento, estado o apariencia de un bloque o elemento. No pueden utilizarse solos, es decir, siempre están acompañados de la clase que define al bloque o elemento (class="block-name block-name--modifier-name"). El nombre del modificador está separado por dos guiones medios (—). Para nombrarlo puedes contestar a las preguntas: ¿Cómo luce?, ¿qué tamaño tiene? o ¿cómo se distingue de los demás?

Existen dos tipos de modificadores:

• Booleano. Se usa cuando la ausencia o presencia del modificador es significativa y su valor irrelevante. Por ejemplo, disabled o error

• Llave-valor. Se usa cuando el valor del modificador es importante, como cuando usas tamaños; size_s, size_m

  <formclass="login-form"><inputclass="login-form__input"><inputclass="login-form__input"><!-- El bloque "button" con el fondo "green" --><buttonclass="button button--bg_green">Inicia sesión</button><divclass="login-form__register"><spanclass="login-form__text"></span><!-- El bloque "button" con el fondo "white" --><buttonclass="button button--bg_white">Regístrate</button></div></form>

Tal vez creas que es mucho trabajo o que tendrás nombres de clases muy largos, pero seguir estas recomendaciones te ayudará a no romperte la cabeza y a reutilizar estilos; tu documento CSS quedará algo así:

.login-form{}
.login-form__input{}
.login-form__text{}
.login-form__register{}

.button{}
.button--theme_green{}
.button--theme_white{}

Y no tendrás que pelearte más adelante con la especificidad o lo difícil que es leer esto en proyectos más grandes:

.login-forminput {}
.login-form.registerspan {}
.login-form.registerbutton {}

Es importante recalcar que en BEM no se deberían usar nombres de etiquetas para definir reglas de CSS y, además, los elementos son opcionales, un bloque podría existir sin contener algún elemento.

Si llegas a tener dudas consulta este acordeón de BEM donde encontrarás varios ejemplos de bloques que se usan comúnmente.

Ya te habrás hecho una idea de cómo utilizar esta metodología, pero aún falta que lo pongas en práctica. Te reto a que escribas en los comentarios cómo sería el HTML de la tarjeta que está abajo, esta es parte del reto #3 del #PlatziWebChallenge que sale cada semana.

Te invito a que le eches un vistazo al reto y pongas a prueba tus habilidades de desarrollo web.

¡Nunca pares de aprender!