Skip to main content

Bonnes pratiques

Pour garantir un projet cohérent, surtout dans le cadre d'un travail collaboratif, il est essentiel d'adopter des conventions claires. Sans cela, chaque développeur risque d'introduire ses propres méthodes, ce qui peut rapidement entraîner un code désordonné et des conflits dans les versions des fichiers.

Ce que nous visons​

Généralités​

  • Utiliser une indentation cohérente par espaces.
  • Respecter l'indentation initiale d'un fichier (ne changez pas son mode d'indentation).
  • Attention aux noms : hero-container n’est pas équivalent à container-hero. Soyez précis.
  • Des noms de variables clairs et descriptifs.
  • Ajouter des sauts de ligne et des espaces pour rendre le code plus lisible.

CSS​

En plus des généralités :

  • Indentation de 2 espaces pour tout le CSS.
  • Écrire les règles CSS proprement, sur plusieurs lignes.
  • Suivre un ordre logique pour les règles CSS (général → spécifique).
  • Utiliser des unités adaptées (rem, em, px, etc.).
  • Toujours ajouter un point-virgule à la fin de chaque règle.
  • Lors de l'ajout de styles pour compenser ceux d’un plugin ou d’un formulaire externe, assurez-vous que votre code reste propre.
tip

Correct

.container {
    display: flex;
    padding: 1rem;
    background-color: #67ADFF;
    font-size: 1rem;
    line-height: 1.2;
}

.element {
    display: block;
    color: #000;
}
danger

Nope

.foo {
   display: flex;background: #67ADFF;line-height: 120%;padding: 1rem;font-size: 1rem;
}

.bar {
   color: #000000;display: block;
}

En Javascript​

Tout En général plus :

  • Indentation : 2 espaces
  • Un statement par ligne.
  • Un point-virgule à la fin des statements.
tip

Yep

const modal = initModal({
    startVisibleAt: 500,
    autoCloseAfter: 3000,
    onOpen: (event) => {
        console.log('Modal opened', event);
        // Your logic here
    },
    onClose: (event) => {
        console.log('Modal closed', event);
        // Your logic here
    },
});

const { startVisibleAt, autoCloseAfter } = modal;

En HTML​

Tout En général plus :

  • Indentation : 4 espaces

Bref, on veut que ça soit lisible, voire beau​

Surtout lisible !

tip

Yep

<h1>Bienvenue dans le guide!</h1>
<p>Ceci est un guide pour vous aider à démarrer.</p>
<ul>
  <li>Étape 1: Préparer l'environnement</li>
  <li>Étape 2: Installer les dépendances</li>
  <li>Étape 3: Exécuter l'application</li>
</ul>
<h2>Prérequis</h2>
<p>Avant de commencer, assurez-vous d'avoir les outils suivants installés :</p>
<ol>
  <li>Node.js</li>
  <li>npm ou yarn</li>
</ol>