Creando proyectos CSS mantenibles con SASS y BEM

Cuando escribimos proyectos en CSS, rara vez nos preocupamos en mantenibilidad. Es decir: ¿Qué pasará cuando otras personas vean el código que acabo de escribir? ¿Cómo podría explicarle a gente que acaba de entrar al proyecto la estructura de mi código?

Imagina que estamos en una empresa de desarrollo. Se están desarrollando 3 productos diferentes, cada proyecto tiene sus guías de estilo de CSS. Si cambiamos de equipo tendríamos que aprender las guías de estilo una y otra vez. Cada vez que integremos a alguien nuevo al equipo, tendremos que explicarle como estructuramos nuestro CSS.

No es muy eficiente.

¿No estaría cool que cada existieran metodologías mundiales de desarrollo en CSS?

¿Un conjunto de reglas pre establecidas para estructurar y escribir CSS?

De hecho, existen.

Uno de ellos es BEM.

BEM nos da la directriz de cómo estructurar nuestro CSS y cómo nombrar adecuadamente a las clases CSS. (Que es algo mas difícil de lo que parece)

BEM significa: Block Element Modifier

Analizemos el siguiente menu con botones.

Los botones y el logo, están metidos en un bloque. (borde rojo)

Este bloque no depende de ningún otro elemento. Se puede poner en cualquier parte de la página y no cambia en nada.

Ahora analizemos los botones.

Estos 3 botones comparten ciertas características.

1. El padding es el mismo.
2. El margen es el mismo.
3. El tipo de letra es el mismo.
4. El tamaño de letra es el mismo.

Cada botón es un elemento. El elemento SI depende del bloque en el que se inserte. Esto significa que por sí solo, el elemento no tiene un significado particular.

Podemos decir que el Element sería como el conjunto de reglas comunes para los botones.

Sin embargo, hay algunas cosas que cambian de forma individual.

1. El color de la letra.
2. El color de fondo del botón.

Modifier sería reglas particulares de cada elemento.

Reglas de escritura CSS en BEM

Para el bloque solo lo escribimos como si fuera una clase normal:

.bloque{
}

Como vimos arriba, el elemento tiene que ser parte de un bloque. Entonces usamos doble guión bajo “__” para separar el nombre del bloque del elemento. Para el caso del menú y botones. Sería algo así

.bloque__boton{
}

Los modificadores, son parte del elemento (y del bloque), por lo que para separar el modificador del elemento se usa el doble guión corto “ — ”. Para el ejemplo de los botones de arriba, seria algo asi.

.bloque__boton--rojo{
}

BEM conoce SASS

Hasta ahora, los módulos BEM los hemos escrito en CSS. Pero recordar que podemos condensar código CSS usando SASS.

Un módulo BEM escrito en SASS se veria asi:

.bloque{
    margin:0 auto;
    &__boton{
        border: 1px solid black;
        &--rojo{
             background:red;
        }
    }
}

Aquí usamos:

• Anidación
• Selectores padre (&)

Conociendo y aplicando la metodología BEM en tus proyectos SASS y CSS te permitirá aumentar la productividad de tu equipo de trabajo y ser mas eficiente.

¿Y qué harás con todo ese tiempo libre?

Further reading:

• https://en.bem.info/
• http://getbem.com/introduction/