¿Qué es BEM CSS?
BEM CSS es una metodología de nomenclatura para definir las clases en los nodos HTML del documento.
Es decir, es una manera de nombrar las clases de los nodos de tu HTML para posteriormente atacarlos con CSS de una manera fácil, sencilla y clara.
El objetivo de BEM es dar mucha más transparencia y claridad en tu estructura HTML y CSS.
BEM te dice cómo se relacionan las clases entre sí, lo que es particularmente útil en secciones complejas del documento.
Todas las clases del proyecto pueden encajar con esta filosofía.
BEM son tres siglas.
- B de bloque.
- E de elemento.
- M de modificador.
En los siguientes vídeos a este en el curso de BEMIT CSS, hago una explicación más detallada sobre estos tres conceptos de BEM, aunque aquí te los voy a resumir para que los conozcas.
Un bloque es una sección independiente que tiene significado propio por sí solo.
Contiene todos los nodos HTML de una estructura a la que te estés refiriendo.
Un elemento son porciones más pequeñas internas a un bloque. Se usa para ir dividiendo el bloque en segmentos más pequeños.
Un modificador sirve para modificar algunas propiedades de un bloque o elemento.
Mira, esto sería un ejemplo de código HTML con la estructura BEM:
<!-- EJEMPLO 1 -->
<div class="block">
<div class="block__element">Elem 1</div>
<div class="block__element">Elem 2</div>
<div class="block__element block__element--modifier">Elem 3</div>
</div>
<!-- EJEMPLO 2 -->
<div class="item item--modifier">
<div class="item__element">Elem 1</div>
<div class="item__element">
<div class="item__another-element">Elem 2</div>
<div class="item__another-element">Elem 3</div>
</div>
<div class="item__element item__element--modifier">Elem 4</div>
</div>Y aquí puedes ver como queda en CSS dicha nomenclatura:
// EJEMPLO 1
.block{ color: inherit; }
.block__element{ color: inherit; }
.block__element--modifier{ color: inherit; }
// EJEMPLO 2
.item{ color: inherit; }
.item--modifier{ color: inherit; }
.item__element{ color: inherit; }
.item__element--modifier{ color: inherit; }
.item__another-element{ color: inherit; }Usando un preprocesador, podrías dejarlo más limpio el código:
// EJEMPLO 1
.block{
color: inherit;
&__element{
color: inherit;
&--modifier{
color: inherit;
}
}
}
// EJEMPLO 2
.item{
color: inherit;
&--modifier{
color: inherit;
}
&__element{
color: inherit;
&--modifier{
color: inherit;
}
}
&__another-element{
color: inherit;
}
}También cabe destacar que si por algún motivo alguna clase se quiere tratar de manera independiente a la metodología BEM, se puede, aunque no es lo más recomendable.
Por ejemplo, cuando estás desarrollando con WordPress, muy a menudo los plugins de terceros que puedas usar, pintaran HTML que se escapara de tu alcance.
<!-- PLUGIN DE COOKIES DE WP - HTML GENERADO -->
<div id="cookies">
<span class="cookiesContainer">Cookies</span>
</div>// PLUGIN DE COOKIES DE WP - CSS GENERADO
#cookies{ color: red!important; }
#cookies .cookiesContainer{ font-size: 20px; }No podrás modificar esos nombres de clases que pintan en el HTML.
Entonces en ese caso, alomejor pintan clases con nombres que no siguen las pautas de nuestro método BEM.
Este tipo de anomalía puede coexistir con nuestro sistema BEM CSS.
No es lo más cómodo, pero si ocurre, tendrás que tratar esas clases de manera independiente.
Bien, ahora, vamos a conocer a fondo los conceptos de BEM.
Siguiente clase del curso: B de Bloque
Este artículo está extraído de una de las clases del curso de Udemy sobre la metodología BEMIT CSS
Aquí tienes otro artículo donde hablo sobre BEMIT CSS