Arquitectura de estilos modular: SCSS, Design Tokens y BEM

Cuando una aplicación crece, los estilos suelen ser de las primeras partes del código en volverse difíciles de mantener. Una clase con nombre poco claro, un color repetido en veinte lugares o un selector que depende de la estructura exacta del HTML terminan convirtiendo la hoja de estilos en un archivo inmenso y frágil.

La arquitectura de estilos propone lo contrario: tratar el CSS como un sistema con reglas, capas y componentes. Tres herramientas que ayudan a lograrlo son SCSS, Design Tokens y BEM. Cada una resuelve un problema distinto y, combinadas, forman una base sólida.

SCSS: más que escribir CSS con variables

SCSS es un preprocesador que amplía CSS con variables, anidamiento, mixins, funciones y partials. Eso permite escribir menos código repetido y organizar el código en archivos con una responsabilidad clara.

Una estructura típica puede verse así:

styles/
  tokens/       variables y design tokens
  base/         reset, tipografía global
  components/   estilos por componente
  utilities/    clases de utilidad

Aunque las variables son el ejemplo más conocido, el valor real de SCSS aparece con los mixins y los partials: fragmentos de código reutilizable e importados.

$color-primario: #0f6bff;

@mixin boton-base {
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 16px;
  cursor: pointer;
}

Cada partial importado añade orden. El resultado es una base de estilos dividida en piezas pequeñas que se entienden por separado.

Design Tokens: decisiones de diseño como datos

Un design token es una unidad mínima de decisión de diseño almacenada como dato: un color, un tamaño de espaciado, un radio, una fuente o una duración de transición.

En lugar de repetir el valor por toda la base de código, el token se define una sola vez y todos los componentes lo consumen.

$tokens: (
  color-primario: #0f6bff,
  color-secundario: #7c3aed,
  color-texto: #1f2328,
  espacio-xs: 4px,
  espacio-sm: 8px,
  espacio-md: 16px,
  radio-sm: 4px,
  radio-md: 8px,
  fuente-base: 16px,
  duracion-rapida: 150ms
);

El beneficio aparece cuando el diseño cambia. Modificar un token actualiza la aplicación entera sin tocar cada componente. Además, los tokens separan qué se quiere representar (un color de marca, un ritmo de espaciado) de cómo se implementa (con SCSS, CSS nativo con custom properties o JSON para otras plataformas).

Niveles de tokens

Conviene distinguir dos niveles:

Tokens primitivos: el valor concreto, como #0f6bff o 16px.
Tokens semánticos: el propósito, como color-marca-primaria o espaciado-carta.

Los componentes deben consumir sobre todo tokens semánticos, porque comunican la intención y no dependen de un valor específico.

BEM: un convenio de nombres

BEM (Block, Element, Modifier) es una metodología de escritura de clases que deja clara la relación entre los elementos dentro del mismo componente.

Bloque (Block): el componente, una unidad independiente. Ejemplo: tarjeta.
Elemento (Element): una parte que vive dentro del bloque. Ejemplo: tarjeta__titulo.
Modificador (Modifier): una variación de estado o apariencia. Ejemplo: boton--primario.

<div class="tarjeta">
  <h3 class="tarjeta__titulo">Bienvenido</h3>
  <button class="boton boton--primario">Aceptar</button>
</div>

En el HTML, cada clase expresa su función: tarjeta__titulo solo puede ser el título de una tarjeta, y boton--primario es un botón con la variante primaria. Este convenio elimina la ambigüedad y hace más difícil que un selector dependa de la posición de otro elemento.

En SCSS, el anidamiento de BEM puede escribirse así:

.tarjeta {
  padding: 8px;
  border-radius: 4px;

  &__titulo {
    font-size: 18px;
    font-weight: bold;
  }

  &__descripcion {
    font-size: 14px;
  }
}

.boton {
  @include boton-base;

  &--primario {
    background-color: $color-primario;
    color: #ffffff;
  }
}

Cómo se combinan los tres

Los tres enfoques trabajan en capas distintas y no compiten entre sí:

Design Tokens centralizan los valores, como los colores y espacios.
SCSS organiza el código, permite reutilizar lógica con mixins y consumir los tokens.
BEM da un lenguaje común para nombrar los componentes en el HTML y mantener la especificidad baja.

Un componente se convierte entonces en una pieza nítida: consume tokens, se escribe con SCSS y se nombra con BEM. Si se cambia un color, se actualiza el token. Si aparece una variante nueva, se crea la clase modificadora. Si una parte deja de pertenecer al bloque, se vuelve un bloque propio.

Consideraciones

La arquitectura de estilos no impone un conjunto único de herramientas, sino una forma de pensar: las decisiones de diseño se centralizan, el código se organiza en piezas pequeñas y los nombres comunican intención. Empezar con un buen sistema de tokens, partials bien delimitados y nombres BEM es una de las mejores inversiones que un proyecto puede hacer desde su primer día.