Resumen
BEM es un estandar o convención que se creó para nombrar las clases CSS de los elementos de un sitio web, el objetivo de utilizar BEM es facilitar la lectura y comprensión del uso que tiene cada clase que se le agrega a un elemento, de esta forma se evitan duplicados en las propiedades de dos clases o escribir código de más, ya sea en CSS o inclusive en JS.
Detalle
BEM son las siglas para Bloque-Elemento-Modificador, lo cual se resume de la siguiente manera:
- Bloque es el contenedor principal del componente que se esta creando.
- Modal, card, header, footer, menu, dropdown…
- Elemento son las partes del bloque, dentro de un bloque pueden haber muchos elementos que conforman la estructura del mismo.
- Icon, text, item, image, button, radio, input, link…
- Modificador son las diferentes variantes que puede tener un bloque o elemento.
- Active, hidden, blue, big, right, left, small.
Conociendo esto, es importante conocer que también existe un estandar para la sintaxis de estos bloques:
[bloque][bloque]__[elemento][bloque]--[modificador][elemento]--[modificador][bloque]__[elemento]--[modificador]
Como se puede ver, el elemento bloque siempre irá primero que el resto, excepto cuando no se agregué, además:
- Para únir bloque con elemento se utiliza __ (doble guión abajo).
- Para utilizar un modificador con cualquiera, ya sea bloque o elemento se utilizaría — (doble guión normal).
Esta nomenclatura puede variar por otras similares como:
[bloque]__[elemento]-[modificador][bloque]__[elemento]_[modificador]
Conociendo esto, se puede pasar a un ejemplo más real, como un botón:
<button class="button button--hidden">
<i class="button__icon"></i>
<span class="button__text"></span>
</button>
Como se puede ver:
- button es el bloque.
- button__icon sería un elemento.
- button__ text sería otro elemento.
- button–hidden sería un modificador del bloque button.
¿Por qué se debería usar BEM?
- BEM permite una mejor comprensión a la hora de leer la estructura de los componentes de un sitio web, permite poder identificar cada parte de un componente e interactuar específicamente con ese elemento sin que existan los problemas de tomar múltiples elementos o tener que crear estructuras de CSS muy complejas.
- BEM es muy recomendado para los preprocesadores como SASS, ya que permite crear una estructura sumamente sencilla y eficiente, por ejemplo:
-
.dropdown { &__item { ... } } .modal { &--open { ... } }
-
Como conclusión se puede ver que BEM es un sistema sumamente completo y que ofrece gran utilidad cuando se trabaja en equipos numerosos que requieran que su código sea comprendido por muchas más personas y además necesiten una escalabilidad constante.
Para mayor información favor contactar a servicio@rolosa.com
