[Astuce][HTML / CSS / JS] L'importance de l'indentation

Hello à toi !

Aujourd'hui on va parler d'une astuce bien pratique pour s'y retrouver facilement dans nos codes, et beaucoup trop laissée de coté, malheureusement. Je parle de l'indentation de code.


Alors si on regarde sur internet la définition, on trouve ceci :

Disposition particulière du texte d'un programme faisant apparaître des décalages au niveau de la marge.

Ces décalages nous servent à voir en un coup d'oeil où se commence et où se termine une balise (html) ou une fonction(Javascript), entre autre.
Utiliser l'indentation permet souvent de régler des problèmes de balises non fermées ou fermées au mauvais endroit.
Tu l'auras compris, l'indentation est très importante et permet d'éviter bien des soucis : ici on t'encouragera toujours à bien endenter ton code pour que tu t'y retrouves facilement (et nous aussi au passage).


Pour expliquer en premier lieu je vais me baser sur le HTML. Le principe est le suivant :
• Quand j'ouvre une balise, une fois ouverte, je vais à la ligne
• Une fois à la ligne j'ajoute un "retrait" par rapport à la gauche (moi personnellement j'appuie sur TAB sur SublimeText ça me fait directement le bon décalage, mais tu peux aussi mettre 2 espaces, 3 espaces, etc. ).
• Si je rouvre une balise, je répète l'opération : une fois ouverte je vais à la ligne et je fais un retrait.
• Pour fermer ma balise, je me remet à la même hauteur que l'ouverture de cette même balises. (Si c'est assez court je peux le mettre à la fin de cette même ligne)

Le principe est le même que ça soit pour le HTML, la CSS ou le javascript. Prenons des exemples basés sur des Libres Services disponibles sur la Tambouille.


Code non indenté :

Code:

<div class="MVN-fiche-rp"> <div class="d-flex">  <div class="avatar-personnage">  <img class="vava" src="https://i.servimg.com/u/f60/15/82/71/87/kcc010.png" alt="avatar 1" />  </div>  <div class="avatar-personnage">  <img class="vava" src="https://i.servimg.com/u/f60/15/82/71/87/44232810.png" alt="avatar 1" />  </div>  <div class="avatar-personnage">  <img class="vava" src="https://i.servimg.com/u/f60/15/82/71/87/63133010.png" alt="avatar 1" />  </div>  </div><div class="titre-rp center">Titre du RP</div><div class="contenu-rp"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec euismod erat. Quisque mattis venenatis erat ac sagittis. Aenean fermentum pulvinar purus, ac congue quam rhoncus at. Praesent suscipit lobortis diam, vel laoreet elit dapibus ac. Proin at laoreet elit. Nulla vitae placerat purus. Sed sit amet lacus lorem. Maecenas nec velit in enim suscipit iaculis. In pharetra nec nisl in pulvinar. Integer facilisis orci vel metus laoreet, sit amet bibendum libero vehicula. Etiam ex enim, tempus in odio quis, placerat imperdiet ligula.</p> <p>Aliquam in viverra odio, vitae dignissim mi. Nullam scelerisque dictum tempor. Integer sed porttitor lectus. Ut augue enim, viverra pellentesque eros eu, tempus imperdiet dolor. Donec faucibus libero id dui accumsan facilisis. Pellentesque quam leo, venenatis at sapien non, venenatis lacinia massa. Nulla commodo volutpat risus. Curabitur sed lacus elit.</p>  <p>Aenean hendrerit lacus imperdiet sagittis ultrices. Aenean hendrerit tortor sit amet rhoncus aliquet. Cras rhoncus sapien at metus pharetra ullamcorper. Pellentesque non nulla et velit aliquet scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ipsum eget tellus iaculis ultrices sollicitudin in diam. Donec porttitor convallis nunc faucibus semper. Phasellus id dui massa.</p></div><div class="copyright center">Fiche codée par :copyright: <a href="http://tambouille-raleuses.forumactif.com/">Mäven</a></div>  </div>

Code indenté :

Code:

<div class="MVN-fiche-rp">
  <div class="d-flex">
    <div class="avatar-personnage">
      <img class="vava" src="https://i.servimg.com/u/f60/15/82/71/87/kcc010.png" alt="avatar 1" />
    </div>
    <div class="avatar-personnage">
      <img class="vava" src="https://i.servimg.com/u/f60/15/82/71/87/44232810.png" alt="avatar 1" />
    </div>
    <div class="avatar-personnage">
      <img class="vava" src="https://i.servimg.com/u/f60/15/82/71/87/63133010.png" alt="avatar 1" />
    </div>
  </div>
  <div class="titre-rp center">Titre du RP</div>
  <div class="contenu-rp">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec euismod erat. Quisque mattis venenatis erat ac sagittis. Aenean fermentum pulvinar purus, ac congue quam rhoncus at. Praesent suscipit lobortis diam, vel laoreet elit dapibus ac. Proin at laoreet elit. Nulla vitae placerat purus. Sed sit amet lacus lorem. Maecenas nec velit in enim suscipit iaculis. In pharetra nec nisl in pulvinar. Integer facilisis orci vel metus laoreet, sit amet bibendum libero vehicula. Etiam ex enim, tempus in odio quis, placerat imperdiet ligula.
    </p>
    <p>
      Aliquam in viverra odio, vitae dignissim mi. Nullam scelerisque dictum tempor. Integer sed porttitor lectus. Ut augue enim, viverra pellentesque eros eu, tempus imperdiet dolor. Donec faucibus libero id dui accumsan facilisis. Pellentesque quam leo, venenatis at sapien non, venenatis lacinia massa. Nulla commodo volutpat risus. Curabitur sed lacus elit.
    </p>
    <p>
      Aenean hendrerit lacus imperdiet sagittis ultrices. Aenean hendrerit tortor sit amet rhoncus aliquet. Cras rhoncus sapien at metus pharetra ullamcorper. Pellentesque non nulla et velit aliquet scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ipsum eget tellus iaculis ultrices sollicitudin in diam. Donec porttitor convallis nunc faucibus semper. Phasellus id dui massa.
    </p>
  </div>
  <div class="copyright center">
    Fiche codée par :copyright: <a href="http://tambouille-raleuses.forumactif.com/">Mäven</a>
  </div>
</div>

Voilà une CSS "minifiée" qu'on peut souvent trouver :

Code:

.MVN-fiche-rp{width:700px;border:5px solid #888aba;background:#0a0b26;color:#0a0b26;font-family:'Goudy Bookletter 1911',serif;padding:10px;text-align:justify;font-size:14px;line-height:15px;margin:auto;border-radius:20px}.MVN-fiche-rp .titre-rp{font-size:2.5rem;font-family:'Sedgwick Ave',cursive;color:#888aba}.MVN-fiche-rp .center{text-align:center}.MVN-fiche-rp .contenu-rp{background:#888aba;border:2px solid #fff;padding:0 10px;border-radius:20px}.MVN-fiche-rp p{text-indent:15px;font-family:'Crimson Text',serif;line-height:1.6rem}.MVN-fiche-rp p:first-letter{font-size:2rem;font-family:'Sedgwick Ave',cursive}.MVN-fiche-rp .d-flex{display:flex;justify-content:center}.MVN-fiche-rp .d-flex .avatar-personnage{width:200px;margin:2px;height:320px;border:2px solid #888aba;overflow:hidden;border-radius:20px}.MVN-fiche-rp .d-flex .avatar-personnage img.vava{min-width:100%;max-width:none!important}.MVN-fiche-rp .copyright{font-size:.8rem;font-style:italic;color:#888aba}

Et voilà la même CSS indenté :

Code:

.MVN-fiche-rp {
    width: 700px;
    border: 5px solid #888aba;
    background: #0a0b26;
    color: #0a0b26;
    font-family: 'Goudy Bookletter 1911', serif;
    padding: 10px;
    text-align: justify;
    font-size: 14px;
    line-height: 15px;
    margin: auto;
    border-radius: 20px
}

.MVN-fiche-rp .titre-rp {
    font-size: 2.5rem;
    font-family: 'Sedgwick Ave', cursive;
    color: #888aba;
}

.MVN-fiche-rp .center {
    text-align: center
}

.MVN-fiche-rp .contenu-rp {
    background: #888aba;
    border: 2px solid #fff;
    padding: 0 10px;
    border-radius: 20px
}

.MVN-fiche-rp p {
    text-indent: 15px;
    font-family: 'Crimson Text', serif;
    line-height: 1.6rem;
}

.MVN-fiche-rp p:first-letter {
    font-size: 2rem;
    font-family: 'Sedgwick Ave', cursive;
}

.MVN-fiche-rp .d-flex {
    display: flex;
    justify-content: center
}

.MVN-fiche-rp .d-flex .avatar-personnage {
    width: 200px;
    margin: 2px;
    height: 320px;
    border: 2px solid #888aba;
    overflow: hidden;
    border-radius: 20px
}

.MVN-fiche-rp .d-flex .avatar-personnage img.vava {
    min-width: 100%;
    max-width: none !important;
}

.MVN-fiche-rp .copyright {
    font-size: .8rem;
    font-style: italic;
    color: #888aba;
}


Ici je vais reprendre l'exemple de [ce tutoriel]. En non-indentée on a ceci :

Code:

$(function(){var idChamps='profile_field_7_5';var versionForum='modernbb';var btnSubmit;switch(versionForum){case 'phpbb2':btnSubmit='form[action="/profile"] .catBottom .mainoption[type="submit"]';break;case 'punbb':btnSubmit='form[action="/profile"] .frm-buttons .button2[type="submit"]';break;case 'invision':btnSubmit='form[action="/profile"] .formbuttonrow .button[type="submit"]';break;case 'awesomebb':btnSubmit='form[action="/profile"] .form-buttons .btn.btn-default[type="submit"]';break;case 'phpbb3':default:btnSubmit='form[action="/profile"] .submit-buttons .button1[type="submit"]';break}
$('body').on('click',btnSubmit,function(){if($('#'+idChamps+'').length){var choixMb=$('#'+idChamps+'').val();if(choixMb!=0){my_setcookie('choix mb popin info',!1)}else{my_setcookie('choix mb popin info',!0)}}})})

alors qu'une fois indenté :

Code:

;$(function(){

  var idChamps = 'profile_field_7_5';

  var versionForum = 'modernbb';

  var btnSubmit;

  switch (versionForum) {
      case 'phpbb2':
        btnSubmit = 'form[action="/profile"] .catBottom .mainoption[type="submit"]';
        break;

      case 'punbb':
        btnSubmit = 'form[action="/profile"] .frm-buttons .button2[type="submit"]';
        break;

      case 'invision':
        btnSubmit = 'form[action="/profile"] .formbuttonrow .button[type="submit"]';
        break;

      case 'awesomebb':
        btnSubmit = 'form[action="/profile"] .form-buttons .btn.btn-default[type="submit"]';
        break;

      case 'phpbb3':
      default:
        btnSubmit = 'form[action="/profile"] .submit-buttons .button1[type="submit"]';
        break;
  }

  $('body')
      .on('click', btnSubmit, function(){

        if($('#'+ idChamps +'').length){
            var choixMb = $('#'+ idChamps +'').val();
         
            if(choixMb != 0){
                my_setcookie('choix mb popin info', false);
            }else{
              my_setcookie('choix mb popin info', true);
            }
        }
      });

});

Et petite astuce bien cool et gratuite, si tu mets bien tes balises à la ligne, sublimeText peut te refaire l'indentation tout seul. Pour cela, tu sélectionnes tout ton code puis tu cliques sur Edit > Line > Reindent et paf c'est indenté comme par magie !


Je t'entends d'ici : oui mais sur les forums dans les messages ça met plein d'espaces partout ! Ici je te renvoie à cette astuce dans laquelle on va se servir des commentaires en HTML pour rendre ça tout propre