Trouvez les répétitions
Peu importe le langage que vous utilisez, écrire du code, rajouter des lignes, créer un immense plat de spaghettis sans prendre en compte la structure et sans l’organiser proprement ? Tout le monde le fait.
J’ai dit TOUT le monde, ne vous cachez pas derrière votre écran, je vous vois. 👀
Je l’ai fait aussi et pendant longtemps. Rassurez-vous : personne ne le fait délibérément.
Il s’agit plutôt d’un processus progressif qui se met en place à mesure que l’on fait de nouveaux changements. Et, à moins d’être prévoyant et vigilant dès le début, vous allez finir avec une codebase CSS chaotique sans vraiment réaliser comment vous en êtes arrivé là… Et c’est normal, ça fait partie de l’apprentissage. Le tout est de le savoir, d’y penser et de prendre le temps d’y remédier.
Mais alors, comment procéder pour vous assurer que le CSS que vous écrivez est propre et maintenable ? La première étape est de trouver des points communs et des répétitions. Je vous ai préparé un exemple qui sera plus parlant que 10 000 mots ! Partons à la chasse aux pokémons, euh... aux répétitions !
<body>
<h2>Différents exemples de boutons</h2>
<div class="buttons-exercise">
<button class="turquoise">Bouton</button>
<button class="turquoise-round">Bouton</button>
<button class="wide">Bouton</button>
<button class="orange-round">Bouton</button>
</div>
</body>Avec ce code HTML, on comprend que cette page contient quatre boutons :
Nous avons donc quatre boutons, tous différents. Tous ? Vraiment ? Pas si sûr. On peut déjà noter quelques ressemblances : la couleur, la taille… On se doute donc que le CSS aura sûrement des propriétés communes, et donc des répétitions.
.turquoise {
padding: 15px;
border: none;
width: 200px;
background: #48D1CC;
color: #242424;
}
.turquoise-round {
padding: 15px;
border: none;
width: 200px;
background: #48D1CC;
color: #242424;
border-radius: 30px;
}
.wide {
padding: 15px;
border: none;
background: #48D1CC;
color: #242424;
width: 400px;
}
.orange-round {
padding: 15px;
border: none;
border-radius: 30px;
width: 200px;
background: #e67e22;
color: #242424;
}Regardez bien, prenez votre temps et trouvez les répétitions.
Nous avons 4 boutons, si une propriété apparaît plusieurs fois avec la même valeur, c’est que vous avez trouvé une partie à améliorer ! Je vous donne la première : padding: 15px apparaît 4 fois. À vous de trouver la suite.
*****
****
***
**
*
Alors, qu'avez-vous trouvé ?
En tête des répétitions, pour un total de 4 répétitions nous avons :
padding: 15pxborder: nonecolor: #242424
En seconde place, pour un total de 3 répétitions nous avons :
width: 200pxbackground: #48D1CC
En dernière position nous retrouvons :
border-radius: 30px
On peut voir que tous nos boutons, malgré leurs différences, ont plusieurs propriétés communes : le même padding, le même border et la même couleur de texte, et quasiment tous ont la même couleur de fond. Cela signifie que vous avez dupliqué votre code. En soi, rien de bien grave, mais en termes de lecture on se répète beaucoup. Mais rien n’est perdu, vous venez de franchir la première étape dans la simplification de votre code.
Appliquez la méthode DRY
Il existe un concept dans la programmation, appelé le principe DRY, qui est une abréviation en anglais signifiant “Don’t repeat yourself”.
“Ne vous répétez pas !”
Toutes ces couches de règles CSS répétitives dans votre code, comme les copier-coller de couleur, de taille et autre, vous empêchent de créer une codebase DRY, et rendent votre code encore plus difficile à maintenir et à modifier.
Merci Captain Obvious, mais qu’est-ce que je peux faire ? 🙄
Je vous propose deux étapes :
Effectuer un refactoring.
Créer des règles additionnelles pour rendre notre code plus lisible pour des cas bien précis.
On commence par le refactoring !
Le refactoquoi ?
Le refactoring (ou refactorisation, en FR) consiste à réécrire votre code dans le but d’une amélioration. Que ce soit un code plus lisible, plus rapide, ou qui consomme moins, le but reste le même : faire mieux.
Dans notre cas : un grand ménage dans votre code pour le rendre plus lisible et éviter les répétitions. 🧹
Eh oui, pour ne pas répéter, il nous faut trouver les répétitions. Ça tombe bien, rappelez-vous plus haut : nous avons analysé notre code et noté toutes les duplications. La plupart de nos boutons ont les mêmes propriétés et les mêmes valeurs.
Reprenons-les et créons une nouvelle classe, .btn :
/* Un bouton classique. */
.btn {
width: 200px;
padding: 15px;
border: none;
background: #48D1CC;
color: #242424;
}Vous obtenez un bouton générique : vous pouvez le réutiliser autant de fois que vous le voulez sans ajout de code et surtout sans répétition. Ce bouton contient toutes les propriétés communes de vos quatre boutons. Parfait, non ?
Seulement, nous avions plusieurs boutons : deux avec des bordures arrondies dont un orange arrondi, deux avec des bordures carrées.
Alors, comment faire pour continuer à garder ces boutons, sans créer de répétitions dans notre code ?
Nous allons créer de nouvelles règles : des propriétés additionnelles, en complément de notre sélecteur générique .btn , qui seront réparties dans de nouveaux sélecteurs plus spécifiques, comme ceci :
/* Un bouton classique. */
.btn {
width: 200px;
padding: 15px;
border: none;
background: #48D1CC;
color: #242424;
}
/* Un bouton classique mais avec des angles ronds. */
.btn-round {
border-radius: 30px;
}
/* Un bouton classique mais plus large. */
.btn-wide {
width: 400px;
}
/* Un bouton classique mais avec une couleur de fond orange. */
.btn-orange {
background-color: #e67e22;
}Pour le CSS on est au top : notre code est plus lisible et donc plus propre. Changer le CSS c’est très bien… mais il faut aussi adapter notre HTML ! Et pour ce faire, nous allons combiner nos sélecteurs.
Combinez les sélecteurs
Prenons par exemple notre bouton aux angles arrondis :
<button class="turquoise-round">Bouton</button>Dans l’état, il va nous falloir mettre à jour le HTML pour que notre code CSS soit appliqué. Nous allons appliquer non pas une, mais plusieurs règles CSS pour obtenir notre bouton, et ce, dans l’ordre : nous voulons d’abord un bouton classique ET avec des bords arrondis. Nous avons donc besoin de la classe .btn pour obtenir un bouton classique, qui sera suivi de .btn-round pour obtenir des bords arrondis.
<button class="btn btn-round">Bouton</button>Et si je veux juste un bouton orange ?
J’applique .btn pour obtenir un bouton classique, puis .btn-orange pour changer la couleur de fond de mon bouton.
<button class="btn btn-orange">Bouton</button>Sans le savoir, vous venez de mettre en place ce qu’on appelle la “separation of concerns” (ou séparation des préoccupations). L’idée est que votre HTML ne contienne que les informations nécessaires à son contenu. Ainsi, toutes vos règles de style sont définies dans votre fichier CSS et sont réutilisables. Fini le CSS en dur dans le HTML ! Dans notre exemple de bouton .btn , nous avons défini l’apparence de nos boutons et rien de plus. Ensuite, pour chaque bouton au design particulier, nous avons défini de nouvelles règles qui, lorsqu’elles seront ajoutées, modifieront la règle de base et s’y ajouteront.
Ainsi, chaque bouton dans votre code aura les qualités définies dans le sélecteur. Ensuite, pour ajouter des règles supplémentaires, nous créons les sélecteurs dans .btn-wide et .btn-rounded qui modifieront notre bouton de base .btn .
Ainsi, en regroupant vos classes et en les séparant par leur fonction, votre codebase devient instantanément plus facile à maintenir. Plutôt que de recourir à Ctrl+F et Chercher-remplacer pour modifier le padding de l'ensemble de vos boutons spécifiques, il vous suffit de changer la valeur d’un seul ensemble de règles. Ici .btn , et la modification se répercute dans tous les .btn de votre site.
À vous de jouer !
Nous avons modifié ensemble le CSS, et quelques boutons dans notre HTML. À vous de modifier les deux autres dans ce CodePen.
Vérifiez vos réponses avec la correction dans ce CodePen.
En résumé
Lorsque vous codez, pensez à adopter le DRY : ne vous répétez pas !
Lorsque vous créez des sélecteurs, faites attention à ne pas y entasser trop de règles. Séparer les sélecteurs par leur fonction vous aidera à garder votre code compréhensible et maintenable sur le long terme.
Nommez vos sélecteurs en fonction de leur utilité.
Vous venez de franchir la première étape pour simplifier votre CSS : trouver des répétitions, refactoriser votre code et le simplifier en créant des classes par fonction. Mais comment définir quelle classe prend le dessus sur une autre ? Passez au chapitre suivant pour approfondir vos connaissances sur les priorités, et notamment la spécificité.
