62

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:

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!

Tarjeta del reto #3
Escribe tu comentario
+ 2
Ordenar por:
4
1313Puntos

Wow. Lo acabo de leer porque me enteré por el grupo. Es la primera vez que veo este método yusto en el momento que queria mejorar mi CSS y HTML 😂

Agradezco mucho que lo hayas escrito. Esta información me ha servido de mucho ⭐️

1
42352Puntos
un año

Qué bueno que te haya servido el tutorial. ¡Nunca pares de aprender! 💚

2
4127Puntos
un año

Si si si. Me pasó igual @darkusphantom me enteré por el grupo también. Que bueno saber sobre este conocimiento de los BEM para aplicarlos en nuestro HTML y CSS, ahora a ponerlo en práctica UwU

Saludos desde Colombia jeje

4
9757Puntos

Me parece que la explicación es muy detallada y concisa, ya tenía una idea de lo que era BEM, pero con esto me ha quedado mucho más claro

3
24499Puntos

Excelente artículo! Esencial para mejorar mi sintaxis en el Frontend!
Aquí esta mi solución (perdón por no separar el css, solo es para practicar):

<!DOCTYPE html><htmllang="en"><head><title></title><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="css/style.css"rel="stylesheet"><style>.container {margin: 10px;}
            .container__title {margin: 10px;}
            .container__parraph {margin: 10px;}
            .container__image {margin: 10px;}
        </style></head><body><!-- Element container --><articleclass="container"><!-- Element title --><h1class="container__title">Team Builder</h1><!-- Element paragraph --><pclass="container__parraph">Scans out talent network to create the optimal team for your project.</p><!-- Element image --><imgclass="container__image"src="home.png"alt="home"></article></body></html>
1
42352Puntos
10 meses

Muy buen trabajo, Gerardo! Muchas gracias por compartirlo. :raise

3
12831Puntos

Me ha encantado el artículo!. Me da gusto leer que mencionas algo super importante y es “un elemento siempre es parte de un bloque, mas no de otro elemento”, pienso que esto es importante mencionarlo, cuando yo inicie no me quedaba muy claro eso 😅

0
42352Puntos
un año

También me generaba muchas dudas esa parte de los bloques al principio!

2
9035Puntos

Muy bueno Hector , gracias !.

1
42352Puntos
10 meses

Muchas gracias por leerlo, espero que te haya servido 😄

2
4127Puntos

Wow genial. Un gran aporte, gracias por especificar con ejemplos, sobre qué es el BEM y cómo aplicarlo. Ahora, a hacer el reto 😁☺️

2
14167Puntos

Excelente explicación bro !
solo queda practicar, la verdad yo que recién comienzo se me hace un poco complejo, pero bueno; con la practica iremos mejorando ! xD

2
10660Puntos

Una vez que creas tu primer proyecto y te das cuenta del problema que se genera al momento de nombrar etiquetas y después pasarlas al CSS, aprendes de lo útil que es BEM, yo siempre tenía esa duda de como nombrar el HTML, ponía cosas como, menu-hamburguesita-about_us, aside-texto-azul, etc. Pero BEM vino a salvarme la vida, al igual que tu aporte

0
42352Puntos
un año

Qué genial que te haya servido! Definitivamente ayuda muchísimo tener un sistema así. No olvides compartirlo! 😄

2

Excelente! Muchas gracias!!

1
42352Puntos
un año

Gracias a ti por leerlo! Espero que te haya servido.

2
5435Puntos

Excelente aporte! Muchas gracias por tu tiempo 😃

0
42352Puntos
un año

Muchas gracias por leerlo. 😅 Espero que te haya servido.

2

Muchas gracias por el artículo! Te felicito por tus aportes para la comunidad tanto con tu post o contestando en el grupo se telegram. Saludos

0
42352Puntos
un año

Muchas gracias por tu comentario, es motivante. 😄 Espero que te haya servido el tutorial.

2
12662Puntos

Buen artículo Hector, conciso y claro, y gracias por dejar el “acordeón”, en el cual veo que nos dan sugerencias de nombres para elementos comunmente usados, a los cuales suelo no saber como diantres llamar 🤣

0
42352Puntos
un año

Me pasa todo el tiempo 😂 Espero que te haya servido.

2

Exelente tutorial Hector! gracias por el aporte!

1
42352Puntos
un año

Muchas gracias por tu comentario! Espero que te haya servido. c: