Los CSS Utility Frameworks definen un gran número de categorías base, cada una de las cuales define una sola propiedad CSS. Además de las dimensiones de un elemento, también se especifican las características de la tipografía, el color y todas las demás propiedades que se nos puedan ocurrir. Para cada propiedad base, cada CSS Utility Framework tiene varias categorías definidas, una para cada breakpoint existente. Combinando varias categorías, se pueden juntar casi cualquier tipo de elemento responsivo que se desee.
El Framework Tachyons al que nos hemos referido anteriormente, tiene ya varios años y no se sigue desarrollando activamente. Sin embargo, debido a lo relativamente sencillo que es, sigue mereciendo la pena empezar con Tachyons para aprender sobre el diseño responsivo. La manera más fácil de entender este enfoque es fijándose en los componentes Tachyons. Estos son elementos de ejemplo que se definen por completo a través de las categorías de utilidad.
Como sucesor natural de Tachyons, hoy existe una variante moderna llamada TailwindCSS. TailwindCSS tiene algunas ventajas sobre Tachyons. Por ejemplo, el proyecto sigue en desarrollo activo y es compatible con la mayoría de los sistemas de desarrollo front-end más populares. Además, TailwindCSS puede adaptarse completamente a las necesidades específicas de un proyecto. Todos los ajustes por defecto se pueden configurar fácilmente, como los breakpoints, la escala del tamaño de la fuente, etc.
A pesar de lo cómodo que resulta trabajar con los CSS Utility Frameworks, también tienen un gran inconveniente: para definir un elemento puede que necesite combinar un gran número de categorías base. Además, por defecto, el archivo CSS original contiene categorías para todas las combinaciones de valores CSS y breakpoints. En el caso de TailwindCSS, hay miles de categorías, lo que hace que el archivo CSS sin comprimir aumente su tamaño hasta alcanzar varios megabytes, un tamaño insostenible desde el punto de vista del rendimiento.
Afortunadamente, TailwindCSS ofrece dos soluciones. En primer lugar, el framework reconoce la instrucción ‘@apply’, que sirve para combinar varias categorías utilizadas repetidamente bajo una nueva categoría. En segundo lugar, TailwindCSS es compatible con la herramienta PurgeCSS. Esta herramienta se utiliza como parte del proceso de construcción para eliminar todas las categorías no empleadas en la construcción de productos. PurgeCSS procesa las plantillas HTML del proyecto e incluye solo las categorías CSS del código CSS original que haya encontrado. Esto reduce el tamaño del archivo de código original a un nivel admisible.