Imagen ilustrativa para la entrada "BEM: La mejor forma de organizar tus clases en CSS"Imagen ilustrativa para la entrada "BEM: La mejor forma de organizar tus clases en CSS"

BEM: La mejor forma de organizar tus clases en CSS

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.

CONTENIDO

¿Qué es BEM?

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.

¿De qué partes está compuesto BEM?

Dentro de esta metodología encontramos tres partes que son las que le dan nombre a la misma.

Bloques

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>

Elementos

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.

Modificadores

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;
}

¿Qué ventajas tiene usar BEM?

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:

  • Hace que su contenido sea altamente reutilizable. El hecho de reciclar código ya es importante pues repetimos estilos en prácticamente todos los diseños puestos se rigen por patrones.
  • Nos hace ser más específicos. Ganamos en especificidad haciendo esto, es un hecho, usando esta metodología es prácticamente imposible confundir bloques de código.
  • Hace un código CSS más sencillo y legible. Sin demasiada especificidad ni hojas eternas esto hace que buscar clases, secciones o incluso leer el código de por sí sea más ameno.

¿Y sus desventajas?

Realmente no hay muchas o quizá no son tan destacables, pero vamos a intentar mencionar algunas de las más comunes:

  • Clases demasiado largas. En ocasiones intentamos ser tan específicos y otorgamos nombres tan largos que podemos llegar a encontrarnos cadenas bastante extensas, sobre todo en los bloques que encontramos varios elementos unos dentro de otros.
  • Hay que aprender y acostumbrarse a usarlo. Para poder usar esta metodología hay que dedicar un poco de tiempo a entenderla y también a practicarla.

¿Dónde aprender sobre BEM?

Son muchos los sitios, plataformas o wikis en la que poder documentarnos pero desde Baética te recomendamos las siguientes opciones:

  • getbem. Ofrece una documentación bastante completa, detallada y con bastantes ejemplos bien seccionados.
  • 9elements. Una forma quizá un poco más interactiva de aprender en la cual los ejemplos y documentación se ofrece de una forma más atractiva visualmente.

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 ?

Conclusión

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.

¿Qué es un CDN y cuales son sus tipos? ITCSS: Estructura tu código CSS como un profesional