Simplifier le travail en équipe et la maintenabilité de vos CSS
Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous
En quelques années, le CSS a gagné ses lettres de noblesse dans le monde du développement, et est même considéré comme certains comme un langage de programmation (Github le propose comme langage par exemple), avec ses contraintes et ses points forts.
La démocratisation des préprocesseurs et des outils permettant la concaténation (réunion de plusieurs fichiers en un seul) de fichiers CSS, permet maintenant d'organiser ses CSS en plusieurs modules. De cette de manière, il est simple de réutiliser des portions de CSS plus simplement entre les projets, et ce fonctionnement est tout de même moins soumis à l'erreur que les copiers collers. (ce sujet a déjà été traîté dans un article sur le Blog : Intégrateurs, arrêtez de vous répéter !)
Là où les choses se compliquent, c'est plusieurs années plus tard, quand un nouveau développeur doit reprendre le projet et est incapable de retrouver ses chatons dans les différents fichiers présents. La plupart du temps, ce genre de projet évolue aux files du temps, et les ajouts ne sont pas forcément rangés aux bons endroits, par exemple.
Comment, dans ces conditions-là, retrouver simplement le bon fichier ? Les adeptes de préprocesseur le peuvent car, une fois bien configuré, ils insèrent le nom du fichier d'origine et la ligne en question dans la source CSS, où certaines extensions chromes permettent d'aller la chercher. Mais les personnes préférant travailler avec des CSS simples et les concaténer au passage en production risquent d'avoir plus de mal.
La solution, qui ne rattrapera malheureusement pas les anciens projets mais qui permettra de ne pas reproduire la même erreur est simple : reproduire les mêmes techniques que les autres langages de programmation, en choisissant et suivant une convention et un style guide.
Les conventions, pour un travail en équipe plus simple
Ce que j'appelle des "conventions" sont un mélange entre un styleGuide et un Framework. Une convention vous indique comment nommer les classes et les Ids, mais aussi les fichiers et les dossiers. Les conventions vous indiquent aussi quel code mettre dans quel fichier. Enfin, les conventions les plus poussées vous indiquent comment écrire votre CSS : où sauter des lignes, où et sous quel forme mettre des commentaires, … . Dans le cas contraîre, il vous suffit de vous munir d'un style guide en plus.
Ces outils peuvent sembler contraignants (et ils le sont, ne soyons pas aveugles) mais ils permettent d'avoir un CSS consistant entre développeurs et projets, et simplifient donc la maintenabilité des projets et le travail en équipe.
Vous pouvez bien entendu créer votre propre convention (un gros travail de documentation est à prévoir), ou bien choisir une existant, ayant déjà fait ses preuves.
OOCSS
By
