Hoy en día cada vez tenemos mas archivos css, clases, estilos en linea... pero si nos preguntamos: ¿Cuanto de organizado están nuestras clases? ¿Tienen una sintaxis ordenada y lógica? ¿Que pasa si queremos modificar un elemento, se modificara también algo que no queremos? La empresa Yandex creó una metodología que nos ayuda a solucionar todo esto, esta es llamada BEM.
¿Que es BEM? (Bloques, elementos y modificadores)
Según la web oficial de BEM, lo definen como una metodología que ayuda a crear componentes reutilizables y compartir código en el desarrollo Front-end, es fácil, modular y flexible. Por lo cual lo podríamos definir como una manera de modularizar la interfaz de usuarios en bloques para que sean totalmente escalables y reutilizables 😊.
Nota: no es necesario, pero la metodología recomiendan usar un preprocesador css para hacer el código css mas limpio, el cual recomiendan SASS, pero no es necesario, en este tutorial veremos como hacer la metodología con css puro! 🤘.
B de bloques
Cuando nos referimos a bloques, nos referimos a un contenedor independiente donde se encontraran diferentes elementos, los cuales sin esos elementos no podría funcionar. Algunos ejemplos de bloques de nuestra web podría ser: el encabezado (header), una lista de navegación por nuestra web (navbar), una tarjeta que muestre el precio de nuestro producto...
Es importante que no pongamos doble guiones bajos (__) o dobles guiones (--) en el nombre de la clase, y si la clase esta compuesta por varios nombres, los separamos por guiones (-), esto sería una clase valida card-material. Veamos un ejemplo:
<nav class="barra-navegacion"> <!-- Bloque -->
...
</nav>.barra-navegacion{
width:100vw;
height: 50px;
...
}E de elementos
Una vez tenemos definido el bloque contenedor, este puede tener diferentes elementos.
Un elemento es una parte de un bloque que no tiene un significado independiente y está semánticamente vinculado a su bloque.
La sintaxis de los elementos es: nombre-bloque__nombre-elemento es decir, se añade después del nombre del bloque dos barras bajas (__) y a continuación se le pone el nombre del elemento.
Nota: como en los bloques, si la clase esta compuesta por varios nombres, añadimos guiones (-) para separar estos nombres.
Veamos un ejemplo:
<nav class="barra-navegacion">
<ul class="barra-navegacion__lista">
<li class="barra-navegacion__lista-enlace">Home</li>
<li class="barra-navegacion__lista-enlace">Blog</li>
</ul>
</nav>.barra-navegacion{
width:100vw;
height: 50px;
...
}
.barra-navegacion__lista{
...
}
.barra-navegacion__lista-enlace{
...
}M de modificadores
A veces es necesario siendo un mismo elemento tener algún estilo diferente, para ello usaremos los modificadores. Estos se utilizan para cambiar alguna apariencia o el comportamiento de uno o varios elementos sin que cambie el estilo de los demás. Para nombrar a un modificador lo haremos poniendo doble guion (--) detrás del elemento o del bloque bloque__elemento--nombre-modificador.
Veamos un ejemplo:
<nav class="barra-navegacion">
<ul class="barra-navegacion__lista">
<li class="barra-navegacion__lista-enlace barra-navegacion__lista-enlace--activo">Home</li>
<li class="barra-navegacion__lista-enlace">Blog</li>
</ul>
</nav>.barra-navegacion{
width:100vw;
height: 50px;
...
}
.barra-navegacion__lista{
...
}
.barra-navegacion__lista-enlace{
...
}
.barra-navegacion__lista-enlace--activo{
...
}Nota: unos requisitos a tener en cuenta sobre los modificadores son los siguientes:
- En el elemento en el cual pongamos el modificador siempre tiene que tener la clase del elemento, es decir la clase modificador no suprime la clase elemento, siempre debe estar ambas.
- Si se quiere separar las palabras, se debe separar con guiones (-), al igual que las anteriores.
- Un elemento puede tener tantas clases modificadoras como sea necesario.
- Una clase modificadora puede tener tantos estilos como se quiera.
Conclusión
Como hemos visto, la metodología BEM nos ayuda a tener organizado el código de una forma sencilla y clara, aún que si es cierto que está metodología puede crear nombres de clases largos (se puede solucionar con un preprocesador, como sass), nos ayuda muchísimo. Por ello creo que es una excelente metodología a seguir en nuestros proyectos, y recuerda Bloque Elemento y Modificador 🔥