Je suis tombé hier soir sur un excellent article de Smashing Magazine intitulé « 12 Principles For Keeping Your Code Clean« .
Ce sont 12 étapes assez simples pour avoir un code propre et réutilisable / exploitable par d’autres webmasters / intégrateurs / etc. Voici une adaptation en français, pour ceux qui n’auraient pas le temps de se plonger dans l’article original.

1. Choisissez un Doctype STRICT

On ne va pas revenir sur la guerre ancestrale entre HTML 4.01 et xHTML 1.0. Les deux possèdent une version stricte, vous obligeant à rédiger du code correct.

2. Utilisez des caractères encodés comme &

Pour commencer, assurez-vous d’utiliser un charset UTF-8

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Ensuite, assurez vous que les caractères comme & soient bien écrits  » &amp; « .
De même pour les lettres accentuées, comme é :  » &eacute;  » ou à :  » &agrave;  »

3. Indentez correctement votre code

Ok, l’indentation n’a -quasiment- aucune influence sur le rendu final de la page, mais le gain en lisibilité est tel que ça vaut carrément le coup. La procédure standard veut que vous indentiez d’une tabulation, ou de quelques espaces, quand vous ouvrez un nouvel élément enfant de l’élément au dessus. Puis ensuite, de revenir d’une tabulation en arrière lors de la fermeture de cet élément.
Evidemment, rien d’obligatoire ni de figé. Ce qui est le plus lisible, et le plus simple à interprêter sera le meilleur 🙂

4. Gardez vos CSS et Javascript hors du fichier.

Les balises <style />, <script />, et autres attributs style= » » devraient être réduits au minimum, et leur contenant externalisé. En effet, il est plus simple d’appeler une seule feuille de style, que d’en maintenir une par page. De même pour les scripts. Certains navigateurs bien réglés les garderont en cache, évitant ainsi des téléchargements inutiles.

5. Organisez correctement vos balises

Un élément de type « inline » doit être dans un élément de type « block ».
Vous voulez faire un lien sur le titre de votre site ?
Ecrivez le comme ceci :

<h1><a href="http://darklg.me">Darklg Blog</a></h1>

Et non comme ça :

<a href="http://darklg.me"><h1>Darklg Blog</h1></a>

6. Eliminez les DIV inutiles.

Gardez ça en tête : Une flopée de DIV ne vaut pas mieux qu’un design en tableau.
Il est possible de styliser un h1, un ul, ou la plupart des éléments de type block aussi bien qu’un DIV.

7. Choisissez de meilleurs conventions de noms

Ok, c’est sûrement très facile de nommer cette classe BleuGras, mais qui vous dit que demain, un client ne vous demandera pas de changer tout ça en Vert et Italique ?
Des idées de noms de classes : Entete, Pied, Footer, Navigation, Menu, Sidebar, Principal, Secondaire …
Vous pouvez évidemment les combiner : EnteteNavigation, MenuSecondaire, etc etc …

8. Laissez CSS gérer la typographie.

Il est peut-être plus évident d’écrire UN TEXTE EN CAPITALES, mais il est beaucoup plus simple, pour l’évolutivité de votre code, de faire appel à la propriété CSS text-transform :

h1 {
text-transform : uppercase;
}

9. Ajoutez de la class à votre <body>

Au delà du jeu de mots pourri, il est assez intéressant d’ajouter différents styles, à travers un attribut class, ou id, à l’élément body. Selon le style à adopter sur vos pages, par exemple menu à gauche, ou à droite …

10. Validez votre code.

Si vous développez sous Firefox et que vous avez la  » flemme « , ou l’impossibilité de soumettre vos pages au validateur xhtml/css du W3C ( codage hors-ligne, en local, etc ), je vous conseille l’extension HTML Validator, qui vous offrira une validation au fur et à mesure de votre travail.
Attention, on devient vite accro au résultat  » 0 erreurs / 0 avertissements « . 🙂

11. Gardez un ordre logique

On ne le dira jamais assez, ordonner vos éléments de manière logique est primordial. Un header doit être dans le haut d’une page, et un footer dans le bas. Certains navigateurs n’affichant pas ( ou mal ) les feuilles de styles vous feraient regretter le choix contraire. Comme le navigateur de votre portable presque-next-gen, par exemple.

12. Faites ce que vous pouvez

Quand on écrit du code depuis le début, c’est plutôt simple d’adapter ces conseils. Malheureusement, c’est beaucoup plus dur lorsqu’on tombe sur un code source datant de l’âge de pierre ( ou plutôt de Frontpage 1.0 ). Si vous êtes bloqués par cette erreur provoquée par une sombre fonctionnalité de WordPress, et qu’il est impossible, ou presque, de modifier, tant pis. L’important, c’est avant tout de vouloir coder proprement, et de faire de son mieux 🙂

Note de Darklg : J’essaie moi même de me tenir à la plupart de ces conseils, mais il y a des fois où, pour telle ou telle raison, ce n’est pas possible. Les conseils que je pourrais rajouter seraient alors :

13. Utilisez le moins de hacks possible

Même s’ils sont souvent des recettes magiques pour réduire des incompatibilités entre navigateurs, les bidouilles sont très rarement évolutives. Pourquoi pas en cas d’énorme blocages, mais évitez les quand vous pouvez 🙂

14. Ne jamais hésiter à demander un avis extérieur.

Que ce soit sur Twitter, sur des Forums, sur des Groupes, auprès de développeurs expérimentés, ou même en soirée codeurs, une question posée au bon endroit, ou un terme recherché intelligemment sur Google, vous sortira souvent d’un immense pétrin.

Cet article est plus une adaptation à ma sauce qu’une véritable traduction. N’hésitez pas à me signaler toute erreur ou toute faute de goût dans les commentaires 🙂

Note : N’hésitez pas à lire cet article de Dame Tartine, qui achèvera de vous convaincre : Code propre et propreté du code

Tags : , ,