Les « utility frameworks » CSS sont un vaste ensemble de classes atomiques dont chacune détermine une seule propriété CSS. En plus des dimensions d’un élément, cela inclut des informations sur la typographie, les couleurs et à peu près n’importe quelle autre caractéristique imaginable. Pour chaque propriété atomique, un « utility framework » contient des classes pour chaque breakpoint défini. En combinant plusieurs classes, il est possible d’assembler un nombre presque infini d’éléments entièrement adaptatifs.
Le framework Tachyons évoqué plus haut a déjà plusieurs années et n’est plus entretenu. Toutefois, en raison de sa relative simplicité, Tachyons mérite d’être considéré pour apprendre le responsive web design. Le moyen le plus facile de comprendre cette méthode est de regarder les composants Tachyons. Il s’agit d’éléments illustratifs qui sont entièrement définis à l’aide de classes utility.
Une version moderne existe aujourd’hui avec TailwindCSS, qui peut être considéré comme le successeur spirituel de Tachyons. TailwindCSS comporte certains avantages par rapport à Tachyons. Ainsi, le projet est toujours activement développé et prend en charge d’emblée de nombreux systèmes populaires de développement front-end. Qui plus est, TailwindCSS peut être entièrement personnalisé en fonction des besoins spécifiques de votre projet. Tous les préréglages, tels que les breakpoints, l’échelle de la taille de police, etc. sont facilement configurables.
Si les utility frameworks CSS sont pratiques à utiliser, ils présentent néanmoins un inconvénient majeur : il faut parfois une grande quantité de classes atomiques pour définir un élément. En outre, par défaut, le fichier texte source CSS contient des classes pour l’ensemble des combinaisons de valeurs de propriétés CSS et de breakpoints. Dans le cas de TailwindCSS, les classes se comptent en milliers, si bien que le fichier CSS non compressé pèse plusieurs mégaoctets, une situation intenable du point de vue des performances.
Heureusement, TailwindCSS y remédie de deux manières. D’une part, le framework connaît l’instruction '@apply', qui sert à grouper des combinaisons de classes utility utilisées plusieurs fois sous un nouveau nom de classe. D’autre part, TailwindCSS prend en charge l’utilitaire PurgeCSS. Celui-ci est employé dans le cadre du processus de build pour supprimer toutes les classes utility inutilisées du build de production. PurgeCSS traite les modèles HTML du projet et n’inclut que les classes CSS trouvées dans le fichier source CSS généré. Cela permet de réduire le fichier source à une taille acceptable.