Una de las formas de trabajar con CSS que más popularidad está tomando actualmente es la de utilizar Clases de Utilidad. Este concepto no es nuevo, ni mucho menos, sino que se remonta a finales de los 90, y empezó a ser utilizado por Yahoo con las primeras versiones de su YUI, una librería Javascript utilizada para gestionar detalles como el CSS de una página, el DOM o los eventos de Javascript.
¿Qué son las clases de utilidad?
Las clases de utilidad son una forma de escribir HTML/CSS en el que creas clases CSS con un único propósito y las reutilizas donde sea necesario. Por ejemplo, en el enfoque tradicional de CSS semántico defines un elemento y como es ese elemento:
<div class="menu">...</div>
<style>
.menu {
display: flex;
flex-direction: column;
background: black;
color: white;
text-align: center;
padding: 1rem;
}
</style>
Sin embargo, por otro lado, el enfoque basado en clases de utilidad define pequeñas clases que establecen como se comporta nuestro elemento. Estas clases, al ser reutilizables se pueden compartir con varios elementos, por lo que el esfuerzo de escribir esas clases de CSS se comparte con todos los elementos:
<div class="flex flex-column bg-black color-white text-center p-1">...</div>
<style>
.flex { display: flex }
.flex-column { flex-direction: column }
.bg-black { background: black }
.color-white { color: white }
.text-center { text-align: center }
.p-1 { padding: 1rem }
</style>
Si realmente no escribimos un código CSS muy personalizado o complicado, a medida que avanzamos en la construcción de nuestra web, creamos menos clases de utilidad y más elementos HTML reutilizando clases, por lo que la sensación percibida es que cada vez vamos más rápido o somos más productivos.
¿Qué es Utility-First Classes?
Existe otro concepto muy similar denominado «Utility-First classes» (Clases de utilidad primero). Aunque en el ejemplo anterior sólo hemos utilizado clases de utilidad sobre el elemento, se pueden mezclar los conceptos CSS con Clases de utilidad y CSS semántico, teniendo parte de clases de utilidad y parte con clases de CSS tradicional semántico.
Sin embargo, el ejemplo anterior no sólo son clases de utilidad, sino también se trata de una filosofía de clases de utilidad primero. Si optamos por utilizar el enfoque extremo en el que solamente usamos clases de utilidad como primera opción, estaríamos optando por esta filosofía. Un claro ejemplo de este enfoque es el utilizado por TailwindCSS.
¿Qué es CSS atómico?
Otro concepto muy relacionado con los anteriores es el de CSS atómico. Este término se refiere a una filosofía extremista muy similar a las clases de utilidad, sin embargo, con la diferencia de que una clase sólo puede corresponder a un estilo por clase. Sin embargo, en las clases de utilidad, muchas veces podemos encontrar que una clase de utilidad corresponde a un grupo de propiedades CSS, y no uno solo.
/* Clase de utilidad y CSS atómico */
.flex { display: flex }
/* Sólo clase de utilidad, pero no CSS atómico */
.flex-column {
display: flex;
flex-direction: column
}
¿Cuándo utilizar clases de utilidad?
La gran pregunta. Utilizar clases de utilidad tiene sus ventajas y sus inconvenientes. En general, utilizar enfoque de clases de utilidad es una buena práctica para reducir el tamaño del código CSS y reutilizar estilos de forma natural y cómoda, sobre todo si trabajamos con componentes.
Sin embargo, abusar de las clases de utilidad o utilizarlas incluso en situaciones donde necesitas o requieres CSS muy personalizado puede generar un código sucio, difícil de mantener y reutilizar.
