La réalisation d’un site Internet peut devenir parfois très complexe lors de gros projets. Mais si celui-ci n’a pas été intégré correctement, la relecture du code HTML et CSS peut s’avérer comme étant un vrai calvaire. C’est pourquoi il est important d’adopter des méthodes de travail afin de faciliter la compréhension d’une page.
Dans cet article, nous allons donc voir comment améliorer notre code à l’aide de 10 petits réflexes à adopter quotidiennement lors de l’intégration d’une page.
Simplifier la lecture de son code HTML
1. Placer les fichiers CSS dans le Header et les fichiers Javascript en bas de page
Le premier réflexe à adopter lors d’une intégration est celui de placer les codes faisant appels à des fichiers extérieurs à des endroits stratégiques que premièrement nous retiendrons facilement (dans le cas où une modification de l’url doit être faite, il nous sera facile de retrouver le code) et qui deuxièmement ne nuira pas au chargement de la page.
Techniquement, nous pouvons placer les feuilles de style où nous le voulons. Cependant, le W3C nous recommande de le faire dans le header. Le bénéfice primaire que nous allons en retirer est que notre page va se charger progressivement plus vite.
Pour les fichiers javascript, il faut se rappeler que lors du chargement d’un script le navigateur ne peut charger la suite de la page tant que le fichier ait été entièrement téléchargé. L’utilisateur devra donc attendre plus longtemps avant de voir apparaître quelconques progrès.
Pour éviter ce problème, placer les scripts js en bas de page juste avant le tag de fermeture du body reste la meilleure solution.
2. Aérer sa page HTML
Il n’y a rien de pire que de devoir comprendre ou modifier du code qui n’est pas structuré. Qu’il soit carrément linéaire sans aucun espace ou qu’il soit disposé complètement anarchiquement, dans tous les cas cela fatigue, fais mal aux yeux et ne donne aucunement envie de travailler.
C’est pourquoi il est important de se construire une logique de structure et de s’y tenir. Au début cela peut paraître difficile ou ennuyeux, mais rapidement cela deviendra une habitude et tout l’intérêt de cette technique deviendra évident.
Comme l’image ci-dessus le montre, l’utilisation de la touche TAB permet d’aligner rapidement et correctement des lignes de codes. Dans le cas où nous voulons ré-aligner une ligne de codes plus en arrière, il suffit de maintenir la touche Shift en même temps que la touche TAB.
3. Toujours fermer les balises
En HTML, il n’y a rien de pire que les erreurs de codes. À cause de l’oubli d’une simple petite barre, toute notre page peut être complètement cassée. Et si nous travaillons sur des pages complexes, rechercher des erreurs peut s’avérer comme étant une perte de temps précieux.
C’est pourquoi fermer les balises d’un élément avant d’y insérer du contenu peut s’avérer être un réflexe judicieux. Cela nous évitera de commettre de potentielles erreurs dans le futur, et de surtout devoir perdre du temps à les retrouver.
4. Utiliser les commentaires
L’utilisation des commentaires en HTML peut parfois s’avérer très utile afin de donner des informations supplémentaires, que ça soit concernant un élément simple ou un groupe d’éléments. Il serait donc idiot de ne pas en profiter.
Bien sûr sans en abuser, les commentaires peuvent encore une fois permettre un gain de temps. Comme ci-dessus, le commentaire explique pourquoi il n’y a pas d’images en HTML pour montrer le logo.
5. Commenter les fins de div ou d’éléments importants
Une page HTML peut facilement devenir compliquée à comprendre si l’utilisation de div s’accentuent. Il devient dès lors difficile d’y retrouver la fermeture de telles ou telles balises, et cela risque donc d’engendrer le dramatique oubli de fermeture de celles-ci.
La meilleure solution que nous pouvons utiliser afin d’éviter ces horreurs sont de commenter nos fins de div ou d’éléments importants comme montré ci-dessus sur l’image. En plus d’obtenir un gain de temps, cela nous permettra par la suite d’avoir une lecture scan du template. Celui-ci sera plus simple à lire et plus facilement compréhensible.
Simplifier la lecture de son code CSS
1. Aérer sa page CSS
Tout comme en HTML, la lecture facile de son code CSS est nécessaire si on ne veut pas avoir à se tirer les cheveux plus tard. Surtout que généralement les feuilles de styles sont bien plus longues (en nombre de lignes) qu’en HTML. Encore une fois, utilisons la touche TAB pour aligner nos styles et éviter de perdre du temps.
L’image ci-dessus montre un exemple de structure que j’utilise. Chaque style CSS qui dépend d’un style précédent est aligné à un TAB plus loin que ce dernier, ce qui me permet une meilleure lisibilité et compréhension de mon code.
2. Utiliser les commentaires
Comme vu précédemment dans le cas de l’HTML, ajouter des commentaires à une feuille de style peut également permettre un gain de temps énorme et une meilleure compréhension de son style. Surtout dans le cas où le code sera revu ou modifier plus tard, l’apport d’explications supplémentaires peut s’avérer comme un must.
3. Ne pas confondre les ID’s avec les Classes
Rares sont les cas où cela peut engendrer de gros bugs au niveau de l’attribution de vos styles, cependant autant ne pas prendre de risques et utiliser convenablement les id’s et les classes.
Les id’s sont utilisés pour des éléments uniques, c’est-à-dire qu’ils ne seront pas répétés plusieurs fois dans une page (par exemple : container, header, content, nav…).
Les classes, elles, sont utilisées pour des éléments qui seront répétés plusieurs fois dans une pages et qui dépendent d’éléments précédents (soit des classes plus importantes, soit des id’s).
L’image ci-dessus montre un exemple d’erreur à éviter.
4. Ne pas utiliser les styles verticaux
Il est parfois tentant d’utiliser les styles verticaux pour certains éléments comme des exceptions par exemple, mais généralement cela finira par devenir une perte de temps dans 99% des cas. En effet si nous désirons modifier les propriétés que nous avons attribués verticalement à un élément, nous allons devoir le faire autant de fois que nous en avons déclarés. De plus, si il y a abus des styles verticaux cela peut ralentir le chargement de la page… À ne pas utiliser donc !
5. Utiliser des feuilles de style particulières pour Internet Explorer
Qui n’a jamais eu de problèmes de compatibilités avec Internet Explorer ? Ce n’est plus un sujet tabou, nous sommes quasi tous obligé de devoir parfois attribuer des styles spécifiques à certains éléments seulement pour IE.
Si trop de propriétés doivent être modifiées, il est parfois plus facile de créer une feuille de style spécifique pour Explorer et de la déclarer à l’aide d’un commentaire conditionnel dans le header de la page HTML.
Conclusion
J’espère que ces 10 petites astuces que j’utilise quotidiennement vous seront toutes aussi utiles qu’à moi-même, et qu’elles vous feront gagner également du temps lors de vos prochaines intégrations de pages web.
Si vous avez des suggestions d’astuces, n’hésitez pas à nous les faire partager via un commentaire.