Comment écrire du bon CSS ?

Woaw, vous pensez que j’ai pris la grosse tête, non ?

Peut-être, mais en tout cas je vais expliquer ce que j’entends par écrire du bon CSS. J’écris cet article pour les développeurs qui connaissent le CSS et qui aimerait améliorer leur pratique.
Le but est de pouvoir écrire du CSS facilement maintenable, et facile à lire.

Apprenez la spécificité CSS

Pour cela, allez voir mon article sur la spécificité CSS

N’utilisez pas les ID, ou !important

Suite au premier point sur la spécificité CSS, il est fortement déconseillé d’utiliser des ID le mot clé important. On comprend qu’ils génèrent une spécificité trop grande. Pour pouvoir prendre le dessus sur ce style, il faudra forcément avoir une spécificité plus grande, donc réutiliser au moins un ID plus un autre sélecteur ou classe.

Il n’y a donc plus besoin (en CSS en tout cas) d’utiliser d’ID. Que faut il donc utiliser ?

Utilisez seulement des classes avec une faible spécificité

Les classes ont une spécificité faible et peuvent être facilement surchargées. Pas besoin d’écrire des sélecteur a rallonge, seul le même sélecteur plus bas dans l’ordre de lecture permet de redémarrer un style. Cela permet beaucoup plus de flexibilité, et de maintenance par la suite.

Les classes ont aussi l’avantage d’être réutilisable, donc les déclarer une fois permet de les réutiliser partout en HTML, ce qui n’est pas le cas des ID qui sont a usage unique.

Attention cependant de grand pouvoirs impliquent de grandes responsabilités. Il faut faire attention a bien utiliser une classe par élément HTML afin de bien découper les fonctions et de ne pas créer de style qui entrerait en collision. Il est donc conseillé de bien nommer les classes et d’essayer de les rendre unique au possible par fonctionnalité.

Essayez d’utiliser une méthodologie

Peu importe la méthodologie, du moment qu’on s’y tient c’est le plus important. Il y a plusieurs écoles, personnellement j’ai pris l’habitude d’utiliser BEM mais il existe plein d’autres méthodologie.

L’écriture de CSS n’est pas une science exacte donc chacun est libre d’écrire comme il veut. Cependant, pour une bonne rédaction de code et pour que les prochains puissent comprendre plus facilement c’est une bonne habitude a prendre. Dans le meilleur des mondes il faudrait qu’on ne puisse pas distinguer que le code a été écrit par des personnes différentes.

Découpez vos styles en composant

Fini l’époque où on mettait tout dans un grand fichier CSS. Il faut faire correspondre chaque élément de l’interface a son propre fichier CSS. Cela permet de mieux compartimenter la structure du code. On sait que tout ce qui a trait au style du header par exemple se retrouvera dans le fichier de header.

Cette technique va de paire avec le prochain point. Il n’est pas question de faire télécharger plusieurs fichier CSS pour chaque élément de l’interface. Ce découpage en composant doit se faire lors du développement, mais à la sortie il ne doit y avoir plus qu’un seul fichier.

Utilisez un préprocesseur

Je vous conseille d’utiliser un préprocesseur. En particulier le preprocesseur Sass. En complément de tout ce qui a été dit plus haut, Sass va permettre d’imbriquer les sélecteurs les uns dans les autres et donc de donner encore plus de contexte au code. Attention à ne pas trop imbriquer les sélecteur sous peine d’avoir des fichiers compliqué à lire.

Les preprocesseurs donnent plein d’avantages et d’outils pour optimiser, factoriser le code afin de se répéter le moins possible et de toujours mieux contextualiser l’écriture de code. C’est dommage de s’en passer.

Utilisez un formateur de code

Pour finir je conseille aussi d’utiliser un formateur de code tel que Prettier. En une ligne de commande, il va reprendre le code et l’adapter à une structure définie. Cela permet d’avoir les mêmes standards de code entre différents développeur.

Pour être concret, il va remplacer tous les sauts de lignes, tous les espaces, toutes les indentations qui ne respectent pas le standard défini par le bon formattage. Encore une fois cela permet de mieux collaborer car plus personne ne se dispute sur la bonne façon d’écrire du code.

En conclusion

Ces quelques conseils devraient vous aider à créer des styles plus adaptés, plus propres, et finalement plus aptes à être utilisé sur des gros projets. En facilitant la collaboration par les standards on amène plus de facilité à créer des interfaces maintenables.