I framework di utilità CSS definiscono un grande insieme di classi atomiche e ogni classe specifica solo una proprietà CSS. Oltre alle dimensioni di un elemento, si tratta di informazioni sulla tipografia, la colorazione e pressoché ogni altra proprietà possibile. Per ogni proprietà atomica, un framework di utilità CSS contiene classi per ciascun breakpoint definito. Combinando diverse classi, quasi tutti gli elementi completamente reattivi possono essere uniti.
Il framework Tachyons descritto sopra è in circolazione da diversi anni e non viene più sviluppato attivamente. Tuttavia, per via della sua relativa semplicità, vale la pena prendere in considerazione Tachyons per imparare il responsive web design. Il modo più semplice per capire è osservare i componenti di Tachyons. Questi sono elementi di esempio che sono definiti esclusivamente usando classi di utilità.
Il successore spirituale di Tachyons è la sua variante moderna, TailwindCSS, che offre alcuni vantaggi rispetto a Tachyons. Il progetto è inoltre sviluppato attivamente e supporta molti sistemi di sviluppo front end popolari. Inoltre, TailwindCSS può essere completamente personalizzato per le esigenze specifiche di un progetto. Tutte le preimpostazioni come i breakpoint, la scala delle dimensioni dei caratteri e simili possono essere configurate facilmente.
Per quanto i framework di utilità CSS siano utili per lavorare, hanno anche un grande svantaggio: può essere necessario un grande insieme di classi atomiche per definire un elemento. Inoltre, per impostazione predefinita, il file di codice sorgente CSS contiene classi per tutte le combinazioni di valori di proprietà CSS e breakpoint. Nel caso di TailwindCSS ci sono migliaia di classi, il che provoca un aumento di diversi megabyte delle dimensioni del file CSS non compresso, uno stato insostenibile dal punto di vista delle prestazioni.
Fortunatamente TailwindCSS vi pone rimedio in due modi. Da un lato, il framework riconosce l’istruzione ‘@apply’, che è usata per riunire sotto un nuovo nome di classe le combinazioni di classi di utilità usate ripetutamente. Dall’altro, TailwindCSS supporta PurgeCSS, uno strumento usato come parte del processo di compilazione per rimuovere qualsiasi classe di utilità inutilizzata dalla compilazione di produzione. PurgeCSS elabora i modelli HTML del progetto e include solo le classi CSS trovate nel file di codice sorgente CSS generato. Questo riduce la dimensione del file di codice sorgente a un livello accettabile.