La forma en la que se organizan los estilos en ocasiones puede llegar a ser un suplicio, sobre todo cuando se tratan de proyectos grandes. Es por ello que nace BEM, una forma de nombrar clases dentro de nuestro código.
Es una nueva forma de nombrar las clases dentro de nuestro código dividiéndolo en bloques que pueden ser reutilizables, altamente modificables y fáciles de buscar o ubicar.
Dentro de esta metodología encontramos tres partes que son las que le dan nombre a la misma.
Son los contenedores en los que se encuentran uno o varios elementos. Estos contenedores suelen ser partes muy específicas de la página y con un peso relevante dentro de la misma.
Un ejemplo común de ello podría ser un div. Y la sintaxis de este sería la palabra con la que queremos nombrar el elemento de bloque sin más.
<!-- Esto es un ejemplo de bloque --> <div class="card"> </div>
Estos hacen referencia a la pieza o piezas que forman parte de ese bloque. En este caso vamos a tomar como ejemplo el contenedor o bloque del ejemplo anterior añadiéndole dos elementos, uno de imagen y otro de encabezado para el nombre de la persona.
<!-- Esto es un ejemplo de bloque --> <div class="card"> <!-- Y esto un elemento --> <img src="/assets/img/foto.png" alt="foto personal" class="card__photo"> <h3 class="card__name">José Antonio Rodríguez Navarro</h3> </div>
La sintaxis como podemos ver es la del elemento padre o bloque en sí, seguido de “__” (doble guión bajo) y finalmente el nombre que le queramos otorgar al elemento.
Ahora que conocemos los bloques y los elementos podemos contar con un bloque o elemento que queremos repetir pero al cual queremos modificar una cosa básica tal como un color de fondo simplemente.
Vamos a tomar como ejemplo que queremos modificar el nombre para que aparezca en mayúscula en una de las cards que estamos reutilizando.
Para ello creamos una nueva clase con un modificador y se lo añadiremos al elemento en cuestión.
<h3 class="card__name card__name--mayus">José Antonio Rodríguez Navarro</h3>
El modificador es el nombre del bloque o elemento seguido de un doble guión “–”.
Los estilos de este como hemos mencionado antes solo contendría los siguientes estilos:
.card__name--mayus {
text-transform: uppercase;
}
La eficiencia a la hora de trabajar usando esta técnica está más que testada pues son muchos los equipos de trabajo y desarrolladores que hacen uso de ella.
A continuación voy a mencionarte algunas de las más destacables:
Realmente no hay muchas o quizá no son tan destacables, pero vamos a intentar mencionar algunas de las más comunes:
Son muchos los sitios, plataformas o wikis en la que poder documentarnos pero desde Baética te recomendamos las siguientes opciones:
Además de estas opciones dentro del apartado web también me gustaría destacarte un vídeo en el cual se aborda el tema de forma sencilla e introductoria para amenizar el aprendizaje ?
Con BEM tenemos una metodología de trabajo bastante interesante y ajustable para proyectos de cualquier índole. Desde Baética recomendamos su uso junto con algún Preprocesador pues su verdadero potencial se descubre realmente ahí. Nosotros te sugerimos combinarlo con Sass, pero eso ya queda totalmente a tu gusto.
