[Blog] Guía BEM para CSS

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