Se créer un bon environnement de travail est essentiel pour éviter des erreurs et améliorer son expérience du code.
Lorsque vous démarrez un projet, utilisez un kit de démarrage qui comprend déjà la plupart des éléments nécessaires. Pour un projet HTML/CSS, je vous recommande d’utiliser le kit de démarrage que j’ai créé, qui répond à bon nombre des questions courantes que vous pourriez vous poser au moment de démarrer votre projet : Comment réinitialiser les valeurs CSS par défaut ? Comment intégrer une police ? Que dois-je inclure dans mon fichier HTML ? Comment importer des fichiers CSS dans mon fichier HTML ?
Chaque projet doit avoir son propre dossier, et tout ce qui concerne ce projet doit être stocké dans ce dossier, sans exception.
Les noms de fichiers et de dossiers ne doivent contenir ni espaces ni caractères spéciaux. Il est crucial d’éviter les erreurs résultant d’une interprétation incohérente des espaces et des caractères spéciaux entre les serveurs. Idéalement, utilisez des lettres minuscules, des tirets et des traits de soulignement pour les espaces.
Cette technique est connue sous le nom de « slugification » et vous pouvez facilement trouver
des générateurs en ligne pour en tester la précision.
Tout ce qui n’est pas HTML doit être placé dans le dossier assets et trié en fonction de son utilisation, par exemple, CSS séparément des images, des documents PDF, des fichiers de polices, etc. Le nom des sous-dossiers n’a pas d’importance. Par contre, nommez-les correctement (cf. slugification).
Donnez un nom logique à vos classes, en prenant en compte la hierarchie dans votre document. N’oubliez pas, les classes, comme les ID doivent être slugifiés !
<div class="header">
<div class="header-item">contenu</div>
</div>Vous pouvez aussi donner un ID à un élément. Par contre, prenez garde, car il n’y peut y avoir qu’un seul élément avec cet ID. Pas de répétion donc !
Pensez à fermer vos balises, afin que le navigateur puisse comprendre où commence et où finit votre bloc.
C’est le plus important.