CSS-Utility-Frameworks definieren eine große Menge atomarer Klassen, wobei jede Klasse nur eine CSS-Eigenschaft festlegt. Dazu zählen neben den Dimensionen eines Elements Angaben zur Typografie, Farbgebung und so ziemlich allen weiteren denkbaren Eigenschaften. Für jede atomare Eigenschaft enthält ein CSS-Utility-Framework Klassen für jeden definierten Breakpoint. Durch die Kombination mehrerer Klassen lassen sich nahezu beliebige, vollständig responsive Elemente zusammenfügen.
Das bereits vorgestellte Framework Tachyons ist bereits einige Jahre alt und wird nicht aktiv weiterentwickelt. Aufgrund seiner relativen Einfachheit ist Tachyons jedoch zum Lernen von Responsive Webdesign weiterhin eine Betrachtung wert. Am einfachsten zu verstehen ist der Ansatz, wenn man sich die Tachyons-Komponenten anschaut. Dabei handelt es sich um Beispiel-Elemente, die vollständig über Utility-Klassen definiert sind.
Als geistiger Nachfolger von Tachyons existiert heutzutage mit TailwindCSS eine moderne Variante. TailwindCSS verfügt im Vergleich mit Tachyons über einige Vorteile. So wird das Projekt aktiv weiterentwickelt und unterstützt von Hause aus viele beliebte Systeme zur Frontend-Entwicklung. Ferner lässt sich TailwindCSS komplett an die jeweiligen Bedürfnisse eines Projekts anpassen. Sämtliche Voreinstellungen wie Breakpoints, Schriftgrößen-Skala etc. lassen sich einfach konfigurieren.
So praktisch die Arbeit mit CSS-Utility-Frameworks ist, sie haben auch einen großen Nachteil: Zur Definition eines Elements wird u. U. eine große Menge atomarer Klassen benötigt. Ferner enthält die CSS-Quelltextdatei standardmäßig Klassen für sämtliche Kombinationen von CSS-Eigenschaftswerten und Breakpoints. Im Falle von TailwindCSS handelt es sich um tausende von Klassen, was die CSS-Datei im unkomprimierten Zustand auf mehrere Megabyte Dateigröße anwachsen lässt – ein unter Performance-Gesichtspunkten nicht tragbarer Zustand.
Glücklicherweise schafft TailwindCSS auf zweierlei Weise Abhilfe. Zum einen kennt das Framework die ‘@apply’-Anweisung, die dazu dient, mehrfach genutzte Kombinationen von Utility-Klassen unter einem neuen Klassennamen zusammenzufassen. Zum anderen unterstützt TailwindCSS das Tool PurgeCSS. Dieses wird als Teil des Build-Prozesses eingesetzt, um alle nicht genutzten Utility-Klassen aus dem Produktions-Build zu entfernen. PurgeCSS prozessiert dazu die HTML-Templates des Projekts und nimmt nur die dabei gefundenen CSS-Klassen in die erzeugte CSS-Quelltextdatei auf. Dadurch sinkt die Größe der Quelltextdatei auf ein akzeptables Maß.