Aujourd'hui, je vous propose de voir votre CSS sous un autre jour grâce à une petite application web : Parse CSS.
Prenez la température de votre CSS avec CSS Stats
Pour commencer, entrez simplement le lien de votre site dans le champ URI et appuyez sur Go. Après quelques petites secondes, vous vous retrouverez face à une présentation complète de votre CSS d'un point de vue purement statistique.
Les différentes couleurs de texte et de background, les tailles de polices ainsi que leurs familles, tout est scrupuleusement dénombré et compte.
Il existe aussi quelques graphes un peu plus complexes, indiquant la proportion de déclaration CSS unique pour les propriétés les plus utilisées, ce qui permet de mieux se rendre compte de l’état de propreté de votre CSS.
Optimiser son CSS
L’intérêt de ces informations est évidemment de pointer le doigt sur certains problèmes du CSS teste. L'analyse du CSS du blog, par exemple, révèle que nous n'avons pas supprimé certaines valeurs par défaut de Fondation, et que nous utilisons un peu trop de nuances de gris (citons juste #8f8f8f, #929292 et #939393).
Toutes ces informations fournissent des pistes importantes pour savoir ou frapper quand vous avez pour objectif de nettoyer une feuille de style.
- Trop de couleurs trop proches ? Mettez en place un nuancier strict (avec des variables si vous utilisez un préprocesseur, par exemple).
- De nombreuses declarations identiques, au niveau de la taille ou de la police ? Essayez de separer la partie structurelle (taille, marges, …) de la partie decoration (couleur, …).
- Et ainsi de suite.
Évidemment, ces genres de taches demande du temps, et sont malheureusement souvent tout en bas de la liste des priorités.
Mon avis
Je trouve CSS Stats très intéressant, car il permet de mettre en avant des failles souvent assez simples à régler et qui fourniront un réel impact sur la maintenance des feuilles de styles concernés.
Mon seul reproche serait de ne pas fournir de pistes pour améliorer les points mis en avant, et de ne pas afficher de stats plus complexes comme le niveau d'imbrication des différentes propriétés.