BEM

Block Element Modifier

www.codigoconjuan.com Juan Pablo De la torre Valdez

 Es una metodología para crear código
reutilizable y ordenado en tus
proyectos con CSS.

Qué es BEM? Hay que seguir las convenciones de

BEM.

Gracias a estas convenciones se evita

la colisión de nombres.

www.codigoconjuan.com

 Reglas de BEM
BEM tiene sus propias
convenciones

www.codigoconjuan.com

 Bloques
Son un Contenedor, si una sección por si sola es significativa y no
requiere de otras secciones para su apariencia (CSS) deberá ir en un
bloque

<div class=“cliente”>…</div>

.cliente {….}

www.codigoconjuan.com
 Elementos
Parte de un bloque, depende del bloque y no es por si solo
significativo; tienen la característica de que utilizan el nombre del
bloque y después doble guion bajo _

<p class=“cliente__nombre”>…</p>

.cliente__nombre {….}

www.codigoconjuan.com
 Modi cadores
¿Un Bloque o Elemento tendrá una variante? Se utiliza un
modificador que es una “bandera” que avisa que ese elemento
tendrá un diseño diferente

<p class=“cliente__nombre--ceo”>…</p>

.cliente__nombre--ceo {….}

www.codigoconjuan.com
fi
 ¡Vamos a aprender BEM!

www.codigoconjuan.com