SASS y BEM

Este artículo explica SASS y BEM.

Explicaremos los conceptos y métodos de implementación para prevenir la confusión y fragilidad que suelen ocurrir cuando CSS crece a gran escala, utilizando SASS y BEM, con ejemplos concretos.

YouTube Video

SASS y BEM

A medida que aumentan la cantidad de archivos y pantallas, CSS suele encontrarse con problemas como 'No sé dónde está definido este estilo' y 'Un pequeño cambio arruinó la apariencia en otra pantalla.'.

Esto se debe a que CSS es intrínsecamente un lenguaje que no impone reglas de diseño. Si sigues escribiendo tal cual, las dependencias no intencionadas aumentarán.

SASS y BEM son técnicas prácticas para transformar CSS de algo que escribes de forma ad hoc a algo que diseñas y gestionas, evitando así estos problemas. Al combinar ambas, puedes clarificar el significado de los estilos y, al mismo tiempo, mejorar la legibilidad, reutilización y mantenimiento.

Razones por las que CSS se vuelve incontrolable fácilmente

Un CSS como el siguiente puede volverse difícil de entender cómo se comporta cuando revisas el código posteriormente.

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• En este ejemplo, la misma clase .title se ve diferente dependiendo de dónde esté ubicada, por lo que no puedes saber al instante qué estilo se aplicará a este .title.
• De esta manera, a medida que los selectores se profundizan y dependen más de los elementos padres, CSS se vuelve más difícil de predecir en cuanto al alcance de su influencia y propenso a fallos al modificarse.

BEM es una convención de nombres que 'expresa roles a través de nombres'

BEM significa Bloque / Elemento / Modificador, e incluye en el nombre qué componente representa la clase y en qué estado se encuentra.

• Bloque es un componente independiente.
• Elemento es un elemento interno del Bloque.
• Modificador representa un estado o variación.

1.card {}
2.card__title {}
3.card--highlighted {}

Con esta convención de nombres, puedes inferir la estructura y el rol solo con ver el HTML.

Forma básica de HTML usando BEM

Aquí tienes un ejemplo de una tarjeta de UI expresada en HTML usando BEM.

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

Solo con los nombres de clase puedes entender que esto es un 'componente card', 'un title dentro de este' y el 'estado enfatizado'. Esta es la principal ventaja de BEM.

Sin embargo, solo BEM puede llevar a un CSS muy verboso.

Si escribes BEM tal cual en CSS, la cantidad de código tiende a aumentar.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Aquí, usando SASS, puedes tener un código organizado que mantiene la estructura.

Expresa BEM de forma natural usando el anidamiento de SASS

Al usar anidamiento en SASS, puedes reflejar la estructura de BEM directamente en tu código.

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& se refiere al selector padre y funciona muy bien con la nomenclatura BEM.

CSS generado a partir de este SASS

El SASS anterior se compila en un CSS como el siguiente.

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

Aunque la apariencia es la misma, la carga cognitiva para el desarrollador se reduce significativamente.

Diseñar para el uso seguro de Modificadores

Dado que los Modificadores en BEM representan 'estados', la clave es limitarlos solo para sobrescribir.

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

El diseño se vuelve más estable si los Modificadores no se tratan como 'adiciones' sino como 'cambios'.

Limita el anidamiento de Elementos a un nivel

En BEM, es importante no anidar elementos demasiado profundamente.

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

Elementos multinivel como .card__header__title son una señal de que deberías considerar dividir el Bloque.

Un ejemplo de estructura de archivos SASS

Finalmente, aquí tienes un ejemplo de una estructura SASS práctica para proyectos reales.

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

Si gestionas cada componente como 1 bloque = 1 archivo, es menos probable que se rompa.

Ejemplo de card.scss

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

Como todo está contenido en esta unidad, eliminar, mover y reutilizar se vuelve fácil.

Resumen

SASS y BEM no son solo técnicas modernas; son enfoques prácticos para convertir CSS en un código diseñable.

• BEM nombra el significado y el rol.
• SASS permite escribir fácilmente manteniendo la estructura.
• Al combinar ambos, el CSS es menos propenso a romperse.

Escribamos el CSS hoy de una forma que tu futuro yo pueda entender.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video