En sitios web pequeños, la forma en que se estructura el código CSS no suele ser un gran problema. Sin embargo, cuando se trata de proyectos web más grandes y complejos, la organización del código se vuelve crucial.
Es por ello que en este artículo quiero presentaros la metodología BEM y explicar cómo esta práctica de CSS puede mejorar enormemente la capacidad de mantenimiento del código, acelerar el proceso de desarrollo y agilizar el trabajo en equipo de los desarrolladores al organizar las clases de CSS en módulos independientes.
Cuando creas sitios web más pequeños, la forma de organizar los estilos no suele ser un gran problema. Creas tus archivos habituales, escribes todo el CSS necesario y eso es todo. Sin embargo, cuando se trata de proyectos más grandes y complejos, la forma en que organizas el código se vuelve crucial. La forma en que está estructurado el código es aún más importante si trabajas en un equipo formado por varios desarrolladores de front-end y back-end.
Hoy en día, existen muchas metodologías con el objetivo de reducir el código CSS y hacer que tu código CSS sea más fácil de mantener. En este artículo, voy a enfocarlo principalmente en la metodología BEM. BEM significa Modificador de elementos de bloqueo. La idea principal detrás de esto es acelerar el proceso de desarrollo y facilitar el trabajo en equipo de los desarrolladores organizando las clases de CSS en módulos independientes.
Ten en cuenta que la mejor práctica es usar BEM solo con clases y no con ID, porque las clases te permiten repetir nombres si es necesario y crear una estructura de codificación más consistente. Además, si deseas dividir el sitio web en módulos organizados, debe tener la misma estructura: bloque, elemento y modificador. Donde cada bloque puede tener múltiples elementos, y tanto el bloque como los elementos pueden tener múltiples modificadores. Sin embargo, comencemos primero con la estructura básica de BEM.
Estructura básica de BEM
Bloque
Un bloque representa un objeto en tu sitio web. Piensa en ello como fragmentos estructurales más grandes de tu código. Los bloques más comunes en todos los sitios web actuales son el encabezado, el contenido, la barra lateral, el pie de página y la búsqueda. Los bloques en BEM son siempre un punto de partida para encadenar tus clases de CSS.
Elemento
Un elemento es un componente dentro del bloque que realiza una función particular. Sólo debería tener sentido en el contexto del bloque:
Modificador
Un modificador es cómo representamos las variaciones de un bloque. Si alguna vez has usado Bootstrap, el mejor ejemplo serían los tamaños de los botones. Los tamaños de los botones son solo variaciones de tamaño del botón en sí, lo que lo convierte en el modificador:
Nombres
El objetivo principal de la metodología BEM es hacer que los nombres de los selectores CSS sean lo más informativos y transparentes posible. El estilo BEM original se define de esta manera:
El nombre del bloque suele ser una sola palabra “.header”, pero si tienes una definición de bloque más larga, se divide con un solo guión -:
El nombre del elemento comienza con doble guión bajo __:
El nombre del modificador comienza con un guión bajo _:
Sólo hay una regla muy crítica en la metodología BEM: un modificador no puede usarse fuera del contexto de su elemento.
BEM en la práctica
Como ya estás familiarizado con las nomenclaturas, veamos la metodología BEM en la práctica. Digamos que tienes este código HTML en acción:
Con el siguiente CSS aplicado:
Ahora bien, no te dejes engañar. En el ejemplo hasta ahora casi siempre teníamos un bloque, un elemento y un modificador, lo que no siempre tiene que ser así.
Por ejemplo, digamos que tenemos un bloque llamado persona. Una persona tiene piernas y brazos, también puede ser mujer o hombre. Si queremos definir a una persona masculina con mano derecha se verá así:
Ahora puedes ver el verdadero significado del BEM. Definimos una persona cuyo modificador es un género. Como no importa si una persona es hombre o mujer, tiene una mano y la mano es un elemento. Y nuevamente, cada persona puede tener mano derecha o izquierda, lo cual nuevamente es un modificador.
En otro caso, si queremos definir persona general con una sola mano, lo haremos así:
Como puedes observar, una vez que te sientas cómodo con BEM, es muy fácil estructurar tu estructura CSS y HTML con él.
Ventajas e inconvenientes de BEM
Ventajas
- BEM es excelente para el mantenimiento. ¿Cuántas veces has tenido que trabajar detrás de alguien en un proyecto de gran escala y tienes demasiado miedo de cambiar algo sin que algo desconocido colapse? Al utilizar BEM, sabes el propósito exacto del elemento y en qué bloque puede aparecer.
- Los nombres de las clases son lógicos e intuitivos y cada miembro del equipo sabe qué hace ese elemento en el sitio web. BEM brinda a todos los participantes de un proyecto una sintaxis declarativa que pueden compartir para que estén en la misma página.
- BEM elimina los selectores CSS anidados. Cada elemento HTML tiene su propia clase CSS y por su nombre sabes cuál es su propósito. Un selector para gobernarlos a todos .
Inconvenientes
- No profundices demasiado en el anidamiento. La regla principal debería ser no utilizar más de dos niveles de padre e hijo.
- Ten cuidado con dónde comienza el alcance de tu bloque. Un error común aquí es cuando un desarrollador usa un bloque, pero no se da cuenta de que en un punto posterior del desarrollo ese mismo bloque tendrá un bloque principal, lo que posiblemente romperá la regla de anidamiento.
Conclusión
La metodología BEM mejoró enormemente la capacidad de mantenimiento en los proyectos web y puedo decir con seguridad que cada desarrollador que vaya a ser "introducido" en el proyecto basado en BEM se pondrá al día muy rápidamente con toda la estructura del código.
Referencia: