4 outils pour auditer et optimiser les CSS
Une fois que votre site Web commence à se développer, votre code. Au fur et à mesure que votre code se développe, CSS peut soudainement devenir difficile à gérer et vous risquez de remplacer une règle CSS par une autre. Cela complique les choses et vous allez probablement vous retrouver avec plein de bugs.
Si cela vous arrive, il est temps pour vous de auditer le CSS de votre site. Auditer votre CSS vous permettra d'identifier des parties de votre CSS qui ne sont pas optimisées. Vous pouvez également réduire la taille de fichier des feuilles de style en éliminant les lignes de code qui ralentissent les performances de votre site..
Voici 5 bons outils pour vous aider à auditer et optimiser CSS.
Type-o-matic
Type-o-matic est un plugin Firebug pour analyser les polices utilisées dans un site Web. Ce plugin donne un rapport visuel dans un tableau, contenant les propriétés de police telles que la famille de police, la taille, le poids, la couleur et le nombre d'utilisations de la police dans la page Web. Grâce au tableau de rapport, vous pouvez facilement optimiser l'utilisation des polices, supprimer les éléments inutiles ou combiner des styles beaucoup trop similaires..
CSS Lint
CSS Lint est un peluches outil qui analyse la syntaxe CSS en fonction de paramètres spécifiques concernant les performances, l'accessibilité et la compatibilité de votre CSS. Vous seriez surpris des résultats, attendez-vous à beaucoup d’avertissements dans votre CSS. Cependant, ces erreurs vous aideront éventuellement à corriger la syntaxe CSS et à la rendre plus efficace. De plus, vous serez également un meilleur écrivain CSS.
CSS ColorGuard
CSS ColorGuard est un outil relativement nouveau. Il est conçu comme un module de nœud et fonctionne sur toutes les plateformes: Windows, OS X et Linux. CSS ColorGuard est un outil de ligne de commande qui vous avertit si vous utilisez des couleurs similaires dans votre feuille de style. par exemple. # f3f3f3 est assez proche de # f4f4f4, alors vous voudrez peut-être envisager de fusionner les deux. CSS ColorGuard est configurable. Vous pouvez définir le seuil de similarité ainsi que les couleurs que vous souhaitez que l'outil ignore..
CSS Dig
CSS Dig est un script Python et fonctionne localement sur votre ordinateur. CSS Dig effectuera un examen approfondi dans votre CSS. Il lira et combinera des propriétés, par exemple. toutes les déclarations de couleur d'arrière-plan iront sous la section arrière-plan. De cette façon, vous pouvez facilement prendre des décisions en fonction du rapport lorsque vous essayez de normaliser votre syntaxe CSS, par exemple. vous pouvez trouver des couleurs dans les styles avec la déclaration de couleur suivante.
couleur: #ccc; couleur: #cccccc; couleur: #CCC; couleur: #CCCCCC;
Ces déclarations de couleur font la même chose. Vous pourriez aussi bien aller avec le #ccc ou avec la capitale #CCC comme standard. CSS Dig peut également exposer cette redondance à d'autres propriétés CSS et vous pourrez rendre votre code plus cohérent..
