Lección 6: BEM

Las nomenclaturas son un sistema para lograr nombrar los elementos de una manera más legibles y cohesionadas. En CSS disponemos de diferentes estructuras, pero todas ellas se basan en clases que permiten escribir estilos de manera más modular, reutilizable, mantenible, rápido y eficiente. En el ecosistema de CSS podemos encontrar algunas estrategias como OOCSS, SMACSS y BEM, siendo esta última la más popular y bastante comprensible por su sencillez.

La metodología BEM (Block Element Modifier, o Bloque Elemento Modificador en español) construye los nombres siguiendo 3 partes.

Bloque: Es una entidad independiente y significativa en la interfaz de usuario. Se representa como una clase CSS única y no se ve afectada por su contexto.

<header class="header"></header>

Elemento: Es una parte indivisible del bloque y no tiene sentido fuera de él. Se representa como una clase CSS que está anidada dentro de la clase del bloque.

<header class="header">
  <nav class="nav">
    <ul class="nav__list">
      <li>
        <a href="#" class="nav__link">Inicio</a>
      </li>
    </ul>
  </nav>
</header>

Modificador: Es una variación o estado del bloque o elemento. Se utiliza para cambiar la apariencia o el comportamiento del bloque o elemento. Se representa como una clase CSS adicional que se añade a la clase del bloque o elemento.

<a href="#" class="link link--verde">Ver ficha</a>

Podríamos resumir su uso en 5 reglas:

Todo se nombra con clases.
Todas nuestras secciones/componentes se denominan bloques.
El interior de nuestros bloques se llaman elementos.
Un Bloque y un Elemento se separa por 2 guiones bajos: blog__articulo.
Un Elemento y su Modificador se separan con 2 guiones: boton--rojo.

BEM ayuda a evitar la especificidad excesiva y la cascada de estilos, lo que facilita el mantenimiento y la reutilización de los estilos en proyectos CSS más grandes y complejos.

Veamos otro ejemplo creando un supuesto carrito de compra en una barra lateral.

<html>
    <body>
        <aside class="aside">
            <!-- Bloque Cesta -->
            <section class="cesta">
                <!-- Bloque Item -->
                <div class="item">
                    <!-- Elemento Item Nombre -->
                    <div class="item__nombre">
                        Libro
                    </div>
                    <!-- Fin Elemento Item Nombre -->
                    <!-- Elemento Item Precio -->
                    <div class="item__precio">
                        30 €
                    </div>
                    <!-- Fin Elemento Item Precio -->
                </div>
                <!-- Fin Bloque Item -->
                <!-- Bloque Item -->
                <div class="item">
                    <!-- Elemento Item Nombre -->
                    <div class="item__nombre">
                        Lapiz
                    </div>
                    <!-- Fin Elemento Item Nombre -->
                    <!-- Elemento Item Precio -->
                    <div class="item__precio">
                        2 €
                    </div>
                    <!-- Fin Elemento Item Precio -->
                </div>
                <!-- Fin Bloque Item -->
            </section>
            <!-- Fin Bloque Cesta -->
        </aside>
        <main></main>
    </body>
</html>

Ahora quiero añadir un boton para Comprar.

<button class="boton">Comprar</button>

Ya había fabricado un botón genérico para todo mi sitio, pero en este caso necesito una variante que desactive el botón cuando el carrito esté vacío. Añado un modificador separado por 2 guiones.

<button class="boton boton--desactivado">Comprar</button>

Nuestro Modificador añade o sobrescribe las clases que necesito. Un posible CSS del ejemplo.

.boton {
    border-radius: 2rem;
    background: white;
    color: black;
    border: 1px solid black;
}

.boton--desactivado {
    opacity: .5;
}

Si ha quedado alguna duda puedes ir al sitio oficial de BEM para ver más ejemplos.

Actividad 1

Crea un header. Debe contener:

Un logo.
Navegador con hipervínculos para moverte por la página.
Un formulario para buscar.

Actividad 2

Crea una estructura para un sencillo sistema de comentarios.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario