Indentation du code
L'indentation c'est lorsqu'un élément HTML est imbriqué, il doit être décalé vers la droite par rapport à son parent. Les balises ouvrantes et fermantes du parent sont alors seules sur leur ligne. N'oubliez pas d'utiliser Beautify à l'intérieur de Brackets afin de procéder à l'indentation de votre code. En cliquant sur l'icône de baguette magique dans les options à droite de l'interface, l'indentation se fait automatiquement, à condition que le code n'ait aucune erreur.
Indentation dans le code HTML
[ Se soucier de la lisibilité du code HTML ]
Voici un exemple typique surtout en ce qui concerne la fabrication des listes. L'exemple de gauche ne permet pas de bien comprendre la structure. Le code n'est pas aéré et il est difficile de bien lire les imbrications. Dans l'image du correctif à appliquer, on voit bien le principe de parent sur une ligne (verticale). Par exemple, le <nav> est sur seul sur une colonne, le reste du code est décalé vers la droite.
ASTUCES
Assurez-vous de bien séparer les balises. Pensez à un oignon... un oignon a des couches, alors il faut bien séparer chacune d'entre elles dans le code. C'est essentiel surtout quand vous serez dans un contexte de développement de projet d'envergure.
[ Ne pas écrire le code sur une même colonne ]
Dans cet exemple, la balise d'ouverture du <body> est décalée de sa balise de fermeture plus bas avant la fermeture du <html>. De plus, le reste de la structure est décalé et aligné avec la balise d'ouverture du <body>. En se référant à l'image du correctif, on devrait voir un décalage des éléments vers la droite afin d'optimiser la lecture du code.
Jusqu'ici nous avons fait que des petits projets avec quelques lignes. C'est plus ou moins représentatif du genre de projets que vous allez faire plus tard, mais il faut commencer avec des projets à petite échelle avant de se lancer dans les productions d'envergures. Cependant, plus que le projet est gros, plus vous allez insérer du code dans votre projet. Ce principe est fondamental surtout quand vous avez des structures plus importantes et plus complexes avec beaucoup d'imbrication d'éléments. Il faut que le développeur soit en mesure de se repérer dans le code et l'indentation sert spécifiquement à cela.
[ Le regard sur l'ensemble d'une structure ]
Voici un autre exemple typique de mauvaise indentation du code. Cette fois-ci j'ai voulu illustrer l'ensemble d'une structure. C'est impossible d'un premier coup d'oeil de bien établir combien j'ai de blocs à l'intérieur de ma balise <main>. Nous voyons cet exemple trop souvent dans vos productions et elle ne devrait plus se reproduire, surtout que vous avez un outil qui permet de faire l'indentation très rapidement dans Brackets.
ASTUCES
Il faut prendre l'habitude d'utiliser Beautify et de cliquer sur la baguette (dans brackets) afin d'indenter au fur et à la mesure votre code. Petit truc ici, établissez une routine dans votre façon de travailler :
- Sauvegardez votre projet
- Indentez votre code
Indentation dans le code CSS
[ Se soucier de la lisibilité du code CSS ]
Dans le cas de l'indentation du code CSS, ce que nous voyons souvent dans vos productions c'est l'exemple suivant. Certaines propriétés sont décalées ou semblent être regroupées ensemble. Cette façon de faire réduit considérablement la lisibilité de votre code. Ce principe est tout aussi applicable au CSS, mais aussi dans un futur rapproché à la programmation de votre projet. En CSS, il faut qu'on puisse identifier rapidement le ou les sélecteurs ainsi que chacune des propriétés qu'on souhaite y affecter.
ASTUCES
Assurez-vous que les propriétés CSS sont réparties selon le principe qu'une ligne est dédiée à une seule propriété.
[ L'écriture des sélecteurs ]
Vous êtes quelques-uns à avoir fait cet exemple. Ce n'est pas réellement un problème, mais le standard qu'on voit c'est de mettre les sélecteurs sur une même ligne comme nous l'illustrons dans l'image du correctif. C'est plus simple afin de vérifier est-ce que je veux appliquer le code à deux éléments ou si c'est que je veux affecter les <footer> à l'intérieur des <p> (ce qui est complètement impensable sur le plan de la sémantique).
