Skip to content

Règles d’or

Indentation du code

L’indentation constitue la première bonne pratique à respecter dans tout développement.

Considérez l’indentation comme un principe de poupées russes : chaque élément contenu dans des balises doit avoir une tabulation en amont.

Cette pratique garantit une meilleure lisibilité du code et facilite grandement la collaboration au sein de l’équipe.

Optimisation des images

Sélectionner le format approprié

Le choix d’un format de fichier adapté constitue la première étape indispensable. Le format WEBP est à privilégier autant que possible pour son excellent ratio qualité-taille.

Dimensionner correctement les images

Les dimensions des images doivent être cohérentes par rapport à leur taille d’affichage dans la page. Dans le cas contraire, les navigateurs devront redimensionner les images pendant le chargement, impactant ainsi les performances.

Compresser les images

La réduction de la densité de pixels permet de limiter le poids des fichiers de manière significative. Des outils comme TinyPNG constituent des solutions efficaces pour optimiser les images.

Documentation du code

Lors de la création d’algorithmes complexes ou de solutions innovantes, la documentation devient primordiale.

Documenter le code en expliquant le fonctionnement et la logique métier apporte un bénéfice substantiel à long terme. Bien qu’apparemment chronophage, cette pratique génère un gain de temps considérable lors des interventions ultérieures de l’équipe.

Nettoyage et organisation du code

Éviter les fonctions, fichiers et commentaires inutiles contribue à la qualité globale du projet.

Chaque élément superflu consomme du temps lors des maintenances futures. Privilégiez une approche de code lisible, organisé et compréhensible pour l’ensemble de l’équipe.

Nomenclature explicite des classes et identifiants

L’utilisation d’abréviations présente un bénéfice minimal sur la taille des fichiers, mais nuit significativement à la lisibilité du code.

Bien que certaines abréviations paraissent évidentes à leur auteur, elles peuvent s’avérer incompréhensibles pour les autres membres de l’équipe. À titre d’exemple : évitez les dénominations comme « btnMidLPad2« . Privilégiez plutôt des noms explicites et compréhensibles pour faciliter la collaboration.

Gestion minimaliste des dépendances

Lors de la recherche de solutions pour implémenter des fonctionnalités, le recours systématique à des extensions externes constitue une pratique courante. Cependant, plusieurs lignes de code suffisent souvent à remplacer une extension qui pourrait présenter les inconvénients suivants :

  • Surcharge du projet
  • Vulnérabilités potentielles
  • Maintenance insuffisante
  • Mises à jour régulières requises

En cas de doute ou de blocage technique, consultez les pairs de l’équipe, qui pourront orienter vers la meilleure approche.

Administrabilité du contenu

Minimiser le code en dur optimise la maintenabilité du projet.

L’utilisation de champs personnalisés (custom fields) est primordiale. Chaque élément textes, images, liens, blocs doit être administrable via l’interface d’administration (Back Office).

Cet objectif permet au site de fonctionner de manière autonome, sans intervention développeur lors des mises à jour de contenu régulières. Le temps investi dans cette configuration est rapidement compensé par les gains de productivité futurs.

Proscription du code HTML brut en administration

L’administrabilité ne justifie pas l’exposition du code HTML en Back Office. L’édition directe de code HTML pour modifier le contenu présente plusieurs inconvénients :

  • Ergonomie insuffisante
  • Dégradation de l’expérience utilisateur
  • Risque élevé d’erreurs de manipulation
  • Perte de contrôle sur la qualité du code

Les champs texte ne sont pas conçus pour cette utilisation.

Cette approche est autorisée UNIQUEMENT dans les contextes suivants :

  • Sites temporaires
  • Situations d’extrême urgence avec délais critiques

Sémantique des liens et boutons

Utiliser les éléments HTML appropriés au contexte constitue une bonne pratique fondamentale. Les URLs sortant l’utilisateur du site doivent impérativement ouvrir le lien dans un nouvel onglet.

Cas d'usage Balise HTML Utilisation
Navigation via URL <a> Lien hypertexte avec style bouton appliqué si nécessaire
Action déclenchée (JS) <button> ou <input type="button" /> Action sans navigation