6 Bonnes pratiques

Avant d'aller plus loin, nous aimerions vous montrer quelques méthodes et bonnes pratiques que vous devriez connaître et utiliser.

# Conventions de nommage

Une convention d'appellation est un ensemble de règles établies pour nommer et épeler les commandes et les fichiers.

Il existe des dizaines d'approches, certaines plus adaptées que d'autres. Pour les besoins de ce cours, il n'y a que quelques conventions de base que vous devriez suivre :

• Tout en minuscules !

• Pas de trémas et pas d'espace - Utilisez le soulignement "_" pour la séparation des mots

• Utilisez les noms des classes de construction (par exemple "about" et "inside")

:memo: Respectez ces conventions tant dans votre code que dans la dénomination de vos fichiers. Les noms de fichiers comportant des espaces posent souvent des problèmes. |

# Commentaires

Dans chaque langage de programmation, il est possible d'ajouter des commentaires qui sont invisibles pour l'utilisateur final dans le navigateur. Nous vous recommandons de les utiliser pour documenter votre code. Par exemple, pour d'autres développeurs qui travaillent également sur la page, ou comme aide pour vous-même. Pour insérer des commentaires, le texte du commentaire doit être entouré de la combinaison de caractères suivante :

    <!-Un commentaire en HTML -->

    /* Un commentaire dans le CSS */

# Formatage et lisibilité

Afin d'améliorer la compréhension et la lisibilité du code pour les développeurs, les lignes de code doivent être indentées de manière hiérarchique. Vous pouvez utiliser des tabulations ou des espaces pour cela.

Le navigateur ne se soucie pas du formatage. Tant qu'il n'y a pas de fautes de frappe dans la syntaxe, il pourrait interpréter correctement toute la page en une seule ligne. Cette technique est appelée minification et est souvent utilisée en CSS et en Javascript. Son but principal est de rendre le code plus court et donc les pages plus rapides. Toutefois, il n'est pas pertinent pour le champ d'application de ce cours.

    <main><!--1er niveau-->
        <section><!-- 2ème niveau-->
            <p><!-- 3ème niveau-->
            Texte
            </p>
        </section>
    </main>
    
    <!-- C'est théoriquement la même chose, mais moins lisible. -->
    <main><section><p>texte</p></section></main>

# Editor Helps.

Votre éditeur peut vous aider à detecter les erreurs

# Syntax Highlighting

Comme mentionné précédemment, le code est mis en évidence par couleur pour améliorer sa lisibilité. Si votre éditeur affiche soudainement des couleurs différentes pour des commandes sémantiquement identiques, c'est un indice que quelque chose ne va pas. Utilisez-le lors du dépannage !

# Autocomplete

Les suggestions que la plupart des éditeurs affichent au fur et à mesure que vous tapez peuvent également être très utiles. Ainsi, vous n'avez pas à apprendre par cœur toutes les balises et tous les attributs. Si vous savez à peu près ce que vous cherchez en anglais, l'autocompletion devrait pouvoir vous faire une suggestion.

Dans la plupart des éditeurs de code, la touche Tab est également un compagnon important. Il vous aide à compléter automatiquement des commandes et/ou à sélectionner des suggestions. De cette façon, vous réduisez le risque de fautes de frappe et vous écrivez le code plus rapidement.

# Plugins

Il existe des plugins pour améliorer votre éditeur et votre productivité.