Clases de utilidad como variables

Las clases de utilidad son las clases que añadimos al html para dar estilos sin tener que escribir css, lo que viene siendo el "modus operandi" de frameworks como Bootstarp o Tailwind.

Usando clases de utilidad.

Pongamos un ejemplo con clases para controlar los margin y padding.

.p-1 { padding: 1rem; }
.m-1 { margin: 1rem; }

Aplicadas en el html:

<p class="p-1 m-1">
    Uso clases de utilidad !
</p>

Si el objetivo es migrar de un "framework", como los mencionados, a un sistema basado en clases únicas (usando BEM por ejemplo) para tener más control desde las css y tener más flexibilidad, convertir esas clases de utilidad en variables (css, sass, etc ...) es una buena alternativa.

Clases de utilidad como variables css.

En este caso concreto podemos crear una serie de variables de distancia, tantas como necesitemos y si somos suficientemente hábiles con la nomenclatura podemos crear un sistema muy escalable.

:root {
    --distance-xs: .5rem;
    --distance-sm: 1rem;
    --distance-base: 1.5rem;
    --distance-lg: 2rem;
    ...
}

Aplicamos las variables al elemento.

.component__has-variables {
    margin: var(--distance-sm);
    padding: var(--distance-sm);
}

Y aplicamos la clase en el html.

<p class="component__has-variables">
    Uso variables
</p>

Con este enfoque conseguimos control sobre elementos específicos, simplemente cambiando las variables, sin afectar a otros elementos o componentes y pudiendo crear excepciones.

Si necesitamos hacer un cambio global, solo tenemos que editar las variables globales ¿Necesitamos más flexibilidad? entonces podemos implementar el sistema de variables globales, semánticas y de componente, sin tocar el html.