Vosu vous demandez certainement en quoi est-il utile d'écrire bien son code, lorsqu'on est le seul à l'utiliser? Justement parce qu'au final, vous ne serez jamais tout seul à l'utiliser: vous aurez parfois besoin d'aide, une autre personne devrait le retoucher, ou bien, cinq ans plus tard, vous devrez revenir sur c code et le modifier. Et si le code n'est pas bien écrit... eh bien c'est galère! Et je vous dit ça aussi bien en tant que codeuse HTML, qu'en tant que futur ingénieur programmation.
Alors si vous êtes prêts à faire un petit effort, voici comment vous pouvez améliorer votre façon de code, dans n'importe quel langage!

I. Commenter son code
Il est très, très, très, très important de COMMENTER son code. Et ce n'est pas pour rien s'il y a autant de très et autant de gras ici, et que c soit le premier point. Commenter son code, c'est important, et même la meilleure chose à faire. En effet, cela apporte énormément d'avantages:

• Les commentaires ne sont pas visibles en dehors du code source. Les utilisateurs ne les verront donc pas.
  
• Si quelqu'un, ou vous même, devez revenir sur votre code, s'il est bien commenté, vous saurez exactement ce qui sert à quoi et pourquoi vous les utilisez.
  
• Les commentaires peuvent être une vraie dissertation, décrivant exactement ce que vous faites. Attention cependant à ne pas "trop" commenter. Cela alourdit le code, et, au final, au lieu d'être plus clair, cela vous embrouille encore plus.

En commentant, n'oubliez pas de mettre plusieurs choses: le début et la fin d'une certaine fonction (par exemple: vous avez plusieurs classes en CSS agissant sur le même objet (pour une infobulle par exemple): il vous suffit alors de mettre en commentaire où débute le code CSS pour cette partie, et où il se termine. C'est d'ailleurs très utile lorsque une des classes bug, et que vous savez que cla vient du CSS: il vous sufit d'observer le CSS de cette classe et trouver le problème), l'effet qu'ont chacune des fonctions, les arguments et paramètres que prennent ces fonctions (surtout pour le javascript et les langages de programmation comme le C++ ou le Java), et le résultat que devrait avoir cette fonction.

Eh bien vous faites exactement ce qui est indiqué plus haut (sauf pour les paramètres, qui sont assez facilement visibles, sauf dans le javascript, et le résultat, qui est visuel) en utilisant ceci:
Commentaires en HTML:

Code:

<!-- COMMENTAIRE ICI -->

Commentaires en CSS:

Code:

/* COMMENTAIRE ICI */

II. Mettre des noms logiques
Des noms logiques et descriptif pour vos identifiants et vos classes est le must, pareil pour toutes les noms de fonctions ou d'objet lors de la programmation. En effet, même si votre code est bien commenté, si vous utilisez au sein d'une fonction un appel à une autre fonction qui a un nom qui n'est pas très claire, vous pourrez être totalement perdu. (surtout pour la programmation en langages de moins haut niveau d'abstraction, comme le C++ et le Java, mais malgré tout, c'est important en HTML que vos classes et identifiants soient clairs).

Si par exemple vous avez deux div ayant comme classe .toto et .tata, est-ce que plus de deux heures de code plus tard, vous vous souviendrez encore à quoi servent ces classes? Ne serait-il pas plus pratique de directement les appeler .infobulle_staff et .partenaires, si le premier vous servait à faire des infobulles pour votre staff, et le second de placer vos partenaires sur la page d'accueil?

De plus, cela facilite la relecture du code pour toute personne normalement constituée: s'il est difficile de savoir ce que toto fait, et quelle partie du css lui est relié (d'autant plus si vous appelez tous vos identifiants et classes .toto en les numérotant...), il est facile de déterminer à quoi correspond la classe .entoure_messages: il s'agit de messages qui seront entourés par un effet grâce au div.

III. Respecter la hiérarchisation
Qu'est-ce que la hiérarchisation? Tout simplement l'ordre d'apparence et d'importance des différentes fonctions, classes ou autre.
En effet, en CSS, il est nécessaire, et conventionnel, d'écrire dans l'ordre de "généralisation" les classes. Donc, on écrit les paramètres voulus pour les classes plus générales en premier, celles des classes plus spécifiques ensuite.
Par exemple, on écrit d'abord les paramètres pour le body, ensuite celles pour le index_body. En effet, le body est l'ensemble de la page, alors que votre index_body n'est que le corps du forum.
On dit aussi qu'on écrit en suite d'héritage: index_body hérite par défaut les paramètres de body, mais peut rajouter des siennes ou "overrider" (= surcharger) les paramètres de body pour les remplacer par les siennes.

Pour le HTML, ce qui est surtout important, c'est l'ordre de fermeture des balises. Si vous avez ouvert un <div> avant un <span>, il va falloir refermer le <span> avant le <div>. Sinon, votre code peut buguer et sera très vite illisible, surtout si vous avez un div, dans une table, qui est dans une table, qui est dans un div, qui est dans un div qui est dans une table.
Le truc à ne pas faire:

Code:

<table></div><div><td><div></td><table><tr></div><table><div></tr></div></td></table></td></div></div>

Aaaaaaaaaah, qu'est-ce qui se termine où? Y'a vraiment toutes les balises? Qu'est-ce qui se paaaaaaaaaasssssseeeeee?

Le truc à faire:

Code:

<table><tr><td><div><div><table><table><div></div></td></tr></table></td></tr></table></div></div></td></tr></table>

Voius trouvez ça illisible? Justement moi aussi, et ça me permet d'introduire le dernier point.

IV. Avoir un code propre
Un code propre, c'est avoir la bonne indentation. Parce que oui, un code propre, c'est surtout un code lisible. Voici un exemples de deux codes qui ne sont pas indentés, et qui sont de ce faite, quasiment illisibles....
HTML:

Code:

<table><tr><td><div><div><table><tr><td><table><tr><td><div></div></td></tr></table></td></tr></table></div></div></td></tr></table>

CSS:

Code:

.partenaires { border:2px dotted white;background-color:#FF34FF;color:#55FFFF;-moz-border-radius:5px;-o-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;padding:10px;margin:-4px;font-family:Tahoma, Arial;font-size:15px; }

Arf, j'ai mal aux yeux! ><
En gros, vous avez tout en tas, il est difficile de voir qui fait quoi, ce qui s'arrête où, et surtout, s'il y a toutes les balises.
Ce qu'il faut faire, c'est, pour le HTML, d'appuyer sur TAB pour chaque balise s'ouvrant dans une nouvelle, de telle sorte à avoir une indentation correcte, et avoir seulement à regarder quelle autre balise est au même niveau d'indentation pour trouver celle qui l'ouvre ou la ferme.
En CSS, il est conventionnel de faire un retour à la ligne après chaque point-virgule ( et d'avoir une légère indentation lorsqu'on met des paramètres dans une classe.

Ce qui nous donne :

Code:

<table>
   <tr>
      <td>
         <div>
            <div>
               <table>
                  <tr>
                     <td>
                        <table>
                           <tr>
                              <td>
                                 <div></div>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
            </div>
         </div>
      </td>
   </tr>
</table>

Code:

. partenaires {
   border:2px dotted white;
   background-color:#FF34FF;
   color:#55FFFF;
   -moz-border-radius:5px;
   -o-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   padding:10px;
   margin:-4px;
   font-family:Tahoma, Arial;
   font-size:15px;
}

Évidemment, vu que Forumactif ne prend pas en compte les TAB, il va falloir le faire sur un programme spécial, comme le Notepad++, mais cela facilite vachement le code, tant à la lecture, qu'à l'écriture!

J’espère que cela va vous aider avec votre code et vos expériences futures, et surtout que vous appliquerez tout ceci, car je vous jure que c'est plus simple pour les correcteurs de codes!

Je vais d'ailleurs vous diriger vers un autre article, que 'Christa a mit en ligne (bien) avant moi, le voici. N'hésitez pas à le lire, et à puiser vos connaissances d'un peu partout!