Maintenir du code CSS peut être très compliqué. Plus le site ou l’application grossit, plus la feuille de style va grossir, et plus vous allez avoir du mal à vous y retrouver quand vous voudrez effectuer des changements. Non seulement vous perdez en lisibilité, mais en plus vous livrez au navigateur une feuille de style de plus en plus grosse.
Il existe des façons d’écrire le CSS qui vont vous aider à vous organiser et faciliter la maintenance: BEM, SMACSS, etc… Et récemment, les méthodes Atomic CSS (ou Functional CSS), ou encore CSS Utility First gagnent fortement en popularité. Elles permettent d’écrire moins de CSS et facilitent donc la maintenance des applications.
Dans cet article, on va explorer l’approche CSS Utility First. On parle aussi d’Atomic CSS (pas exactement la même chose, mais l’esprit est le même) ou de Functional CSS. Peu importe le nom que vous lui donnez ou les différences techniques entre ces approches. L’important est de comprendre l’approche.
Qu’est-ce que l’approche CSS Utility First ?
L’idée est simple.
Le CSS est très répétitif, et ça, ce n’est pas nouveau. Comptez le nombre de fois où votre feuille de style contient une déclaration simple comme font-size: 1.2rem; , ou display: flex; , ou encore margin: 0;. Le nombre peut vite monter.
.post-meta {
font-size: .75rem;
color: lightgrey;
text-transform: uppercase;
...
}
.comments-count {
font-size: .75rem;
color: lightgrey;
margin-left: 4px;
...
}Il y a des chances que les mêmes blocs de CSS se retrouvent à de multiples endroits dans votre feuille de styles. Une solution simple est d’isoler ces styles.
.post-meta {
text-transform: uppercase;
}
.comments-count {
margin: 0;
}
.de-emphasized-text {
font-size: .75rem;
color: lightgrey;
}Il suffit ensuite d’ajouter la classe de-emphasized-text sur les deux éléments concernés. Les classes au nom plus sémantiques post-meta et comments-count gardent uniquement leur styles spécifiques/uniques.
Les approches CSS Utility First poussent simplement cette idée à l’extrême, en isolant chaque propriété CSS utilisée dans une classe unique.
.uppercase {
text-transform: uppercase;
}
.margin-0 {
margin: 0;
}
.small-text {
font-size: .75rem;
}
.lightgrey {
color: lightgrey;
}Peu importe le nom de vos classes pour le moment. Vous pourriez aussi opter pour des noms encore plus courts, ou précis, comme color-lightgrey, ou m-0, ou encore txt-0-75rem.
Le principe est qu’une seule propriété est associée à chaque sélecteur. Une classe pour une propriété et une valeur.
Workflow et bénéfices
En écrivant un seul sélecteur par propriété et valeur, et en évitant des noms sémantiques, vous rendez toutes vos classes réutilisables, partout dans votre HTML.
Si on y réfléchit bien, c’est exactement ce pour quoi les classes CSS existent : fournir un bloc de style réutilisable à plusieurs endroits. Ainsi, tous les éléments textes qui doivent faire .75rem vont avoir la classe small-text, tous les éléments gris clair vont avoir la classe lightgrey.
C’est vraiment tout simple en fait.
Quand on écrit son CSS de façon “classique”, on passe souvent de l’HTML au CSS et vice versa de façon incessante. On écrit un petit bout d’HTML, on va dans notre fichier CSS et on le style, on revient dans l’HTML, on écrit encore un petit bout, on le style, etc…
Avec l’approche Utility First, Vous allez écrire votre bout d’HTML, ouvrir votre feuille de styles, écrire les classes correspondantes, et revenir dans votre HTML. Jusque là rien de différent.
Mais la prochaine fois que vous tomberez sur un élément à styler pour lequel vous avez déjà écrit la classe dans votre feuille de styles, vous pourrez rester dans votre HTML !
Fini les allers-retours incessants ! HTML, CSS, HTML, CSS, etc… Sauf si vous ne souvenez plus du nom de vos classes, mais ça, c’est juste une question d’habitude !
Oui, vous aurez peut-être une longue liste de classe dans vos éléments HTML, mais en terme de productivité, le gain est énorme.
En termes de performances, vous allez livrer des feuilles de styles bien plus légères ! La même propriété de font-size, répétée 25 fois dans votre feuille de style va se transformer en une seule déclaration de 3 lignes ! Et ça pour chaque propriété ! Je vous laisse faire le calcul !
En termes de transférabilité, si vous isolez vos classes outils dans leur feuille de styles utilities.css, alors vous pourrez utiliser cette feuille de styles pleine de classes outils dans tous vos projets ! Et plus vous serez familier avec votre système de classe, plus vous gagnerez en productivité !
En termes de cohérence, utiliser cette approche va vous aider à systématiser la façon dont vous abordez le CSS, et va réduire les erreurs. Vous ne vous tromperez plus de font-size ou de couleur car vous allez définir en amont les tailles de textes utilisées sur votre site ou dans votre application, et associer une seule classe pour chaque valeur. Une classe = une propriété = une valeur. Vous saurez que les petits textes utilisent la classe txt-sm par exemple, et que cette classe correspond à la taille 12px.
En termes de maintenance, changer une couleur, une taille de police ou un padding devient ultra simple. Changez la valeur dans votre classe, et le changement sera reflété partout, tout de suite. Même sans utiliser Sass.
Démarrer avec l’approche Utility First
Exemple Sans SASS
Vous pouvez parfaitement utiliser cette approche sans utiliser aucun autre outil comme Sass ou PostCSS. Isolez simplement chaque propriété et chaque valeur dans sa propre déclaration CSS. C’est plus simple de démarrer avec un nouveau projet.
Créez une nouvelle feuille de style, et nommez-la utilities.css par exemple.
Si vous avez une maquette sur laquelle vous appuyer pour construire votre site ou application, vous pouvez commencer par l’analyser et y extraire les tailles de polices, par exemple. Si votre app affiche des textes en 12px, 16px, 20px, et les titres en 26px par exemple, il vous suffit de créer ces quatres classes.
.txt-sm {
font-size: 12px;
}
.txt-md {
font-size: 16px;
}
.txt-lg {
font-size: 20px;
}
.txt-xl {
font-size: 26px;
}Et utilisez ces classes dans votre HTML. Vous pouvez toujours utiliser des noms de classes sémantiques, mais ces classes seront utilisées pour les styles particuliers ou les surcharges. Faites de même pour vos couleurs, vos marges internes et externes.
Aussi, vous pouvez ajouter des classes pour les propriétés de mise en page simple que vous utilisez souvent.
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.justify-center {
justify-content: center
}
.align-center {
align-items: center;
}Etc…
Chargez ensuite cette feuille de style après vos styles de bases dans la balise <head> de votre HTML.
Au fur et à mesure que vous allez styler votre document HTML, ajoutez les classes outils dans votre fichier utilities.css. C’est aussi simple que ça.
Ce sera un peu laborieux au début, mais l’avantage est que vous pourrez réutiliser votre feuille de style ainsi crée dans vos autres projets !
Sass Magic
Si vous utilisez SASS, c’est encore plus simple de générer toutes vos classes outils pour toutes les propriétés et valeurs “systématisables” facilement comme les font-size ou padding. Il suffit d’utiliser des maps et une petite mixin comme celle-ci :
$txt-1: .625rem; // 10px
$txt-2: .75rem; // 12px
$txt-3: .875rem; // 14px
$txt-4: 1rem; // 16px
$txt-5: 1.125rem; // 18px
$txt-6: 1.25rem; // 20px
$txt-7: 1.5rem; // 24px
$txt-8: 1.75rem; // 28px
$txt-9: 2rem; // 32px
$txt-10: 3rem; // 48px
$text-sizes: (1: $txt-1, 2: $txt-2, 3: $txt-3, 4: $txt-4, 5: $txt-5, 6: $txt-6, 7: $txt-7, 8: $txt-8, 9: $txt-9, 10: $txt-10);
@mixin helper( $property, $prefix, $map ) {
@each $key, $value in $map {
.#{$prefix}#{$key}{
#{$property}: #{$value};
}
}
}
@include helper('font-size', 'txt-', $text-sizes);La mixin helper prends en paramètre une propriété, un préfixe pour votre classe, et la map à partir de laquelle vous voulez générer vos classes. Une map est simplement une liste d’éléments clé:valeur.
Cet exemple va générer des classes de ce type :
.txt-1 {
font-size: .625rem;
}
.txt-2 {
font-size: .75rem;
}
...Vous pouvez créer d’autres mixins pour générer vos autres classes, pour vos couleurs, vos marges internes et externes, vos hauteurs de lignes, etc… Tout ce que vous pouvez systématiser dans une map se prête très bien à une génération automatique comme celle-ci.
Tailwind CSS
Tailwind CSS est un framework CSS qui pousse ce concept à l’extrême. Il fournit des classes CSS simples pour tout. Vraiment tout. Bordures, couleurs, couleurs d’arrière plan, positionnement, transition, z-index, transform, etc… TOUT. Il génère même des variantes responsives si vous le souhaitez. Par exemple .md:text-lg pour afficher du texte en grand, mais seulement à partir du breakpoint md (640px par défaut).
C’est un simple plugin PostCSS, donc il suffit d’installer PostCSS, Tailwind, et c’est parti. Tout est configurable : vous pouvez sélectionner vos couleurs, personnaliser vos breakpoints, choisir quelles classes outils vous voulez inclure, etc…
Pour vous aider
J’aime beaucoup Tailwind, mais je préfère utiliser Sass, et par défaut, il génère beaucoup de classes non-utilisées. Tout est configurable, mais il faut installer PostCSS, Tailwind, créer un fichier de config, etc…
Mais j’aime énormément les réglages par défaut qu’il propose, et le fait qu’il me permet vraiment de systématiser mon approche.
Je me suis donc bricolé ma petite feuille de styles Sass que je copie régulièrement dans mes projets. Je la personnalise en changeant les valeurs utilisées, et hop ! Je gagne un temps fou.
Vous pouvez la télécharger sur https://github.com/vincedubroeucq/utilities ! Elle inclut une petite feuille pré-générée pour vous aider à démarrer plus rapidement. Cela vous permettra de tester l’approche CSS Utility First en deux temps trois mouvements ! C’est cadeau !
Conclusion
Cette approche est extrêmement simple à mettre en oeuvre. Il suffit simplement d’isoler chaque propriété et valeur CSS dans sa propre classe. C’est un peu laborieux au début, mais le confort et le gain de productivité est vraiment non-négligeable.
En utilisant cette approche, vous pourrez systématiser facilement vos designs, vous écrirez moins de CSS, et vous faciliterez donc sa maintenance et les performances de votre site ou app.
Et cerise sur le gâteau, vous pourrez copier-coller vos utilities dans tous vos projets ! Il suffira simplement de modifier quelques paramètres ou valeurs si vous utilisez Tailwind ou Sass, pour les adapter à votre nouveau projet. Et ça c’est cool.
C’est l’approche que j’utilise pour le thème développé dans Développer son Thème WordPress Classique. C’est simple et efficace, et ça me permet de garder ma feuille de styles légère.
Enjoy !
PS : Si vous voulez apprendre le développement pour WordPress, inscrivez-vous à ma newsletter juste ci-dessous, pour recevoir des conseils pour débuter et mes prochains articles ! A bientôt !