wikinotes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{tag>cours dev développement web css sass html}}



====== Simplifiez votre code ======

Notes et transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sass-1#table-of-content|Simplifiez vous le CSS avec Sass]] proposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].


===== 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 !


<code html>
<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>
</code>

Avec ce code HTML, on comprend que cette page contient quatre boutons :

{{css_exemple_boutons.png}}
4 boutons aux caractéristiques différentes.

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.

<code css>
.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;

}
</code>

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: 15px'' 
    * ''border: none'' 
    * ''color: #242424''
  * En seconde place, pour un total de 3 répétitions nous avons : 
    * ''width: 200px'' 
    * ''background: #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.


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 **refactoring** ou **refactorisation** 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'' :

<code css>
/* Un bouton classique. */
.btn {
      width: 200px;
      padding: 15px;
      border: none;
      background: #48D1CC;
      color: #242424;
}
</code>

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.

{{css_exemple_boutons.png|4 boutons aux caractéristiques différentes}}


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 :

<code css>
/* 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;
}
</code>

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 =====

<note>
En CSS, les sélecteurs sont utilisés pour cibler les éléments HTML à mettre en forme dans nos pages web.
[[https://developer.mozilla.org/en-US/|MDN]], ou Mozilla Developer Network, est un site hébergé par la fondation Mozilla qui contient beaucoup, mais alors BEAUCOUP, de documentation et notamment sur les standards HTML, CSS ou JavaScript. Jetez-y un œil, ça vaut le détour.
</note>

Prenons par exemple notre bouton aux angles arrondis :

<code html>
<button class="turquoise-round">Bouton</button>
</code>

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.

<code html>
<button class="btn btn-round">Bouton</button>
</code>

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.

<code html>
<button class="btn btn-orange">Bouton</button>
</code>

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 plus **facile à maintenir**. Plutôt que de recourir à <key>Ctrl</key>+<key>F</key> 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.



===== 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é.



[[000_start|⌂ Retour au sommaire]] |
[[120_definir_les_priorites|Suivant ▷]]
wikinotes

Outils pour utilisateurs

Outils du site

Outils de la page
