Outils d'audit CSS

À propos de l'auteur

Jonglant quotidiennement entre trois langues, Iris est connue pour son amour de la linguistique, des arts, du web design et de la typographie, ainsi que pour sa mine d'or de…
En savoir plus sur
Iris
↬

Quelle est la taille de votre CSS? À quel point est-ce répétitif? Qu'en est-il de votre score de spécificité CSS? Pouvez-vous supprimer en toute sécurité certaines déclarations et préfixes de fournisseurs, et si oui, comment les repérez-vous rapidement? Au cours des dernières semaines, nous avons travaillé sur la refactorisation et le nettoyage de notre CSS, et par conséquent, nous sommes tombés sur quelques outils utiles qui nous ont aidés à identifier les doublons. Alors passons en revue certains d'entre eux.

CSS Stats

CSS Stats exécute un audit approfondi des fichiers CSS demandés sur une page. Comme de nombreux outils similaires, il fournit une vue semblable à un tableau de bord des règles, des sélecteurs, des déclarations et des propriétés, ainsi que des pseudo-classes et des pseudo-éléments. Il décompose tous les styles en groupes de la mise en page et de la structure à l'espacement, la typographie, les piles de polices et les couleurs.

L'une des fonctionnalités utiles fournies par CSS Stats est le score de spécificité CSS qui montre à quel point certains sélecteurs sont inutilement spécifiques. Des scores plus faibles et des courbes plus plates sont meilleures pour la maintenabilité.

Il comprend également un aperçu des couleurs utilisées, imprimées par ordre de déclaration, et un score pour les déclarations Total vs. Unique ainsi que les tableaux de comparaison qui peuvent vous aider à identifier les propriétés qui pourraient être les meilleurs candidats pour créer des abstractions. C'est un bon début pour comprendre où se trouvent les principaux problèmes de votre CSS et sur quoi se concentrer.

Yellow Lab Tools

Yellow Lab Tools est un outil gratuit pour auditer les performances Web, mais il inclut également des aides très utiles pour mesurer la complexité de votre CSS – et fournit également des informations exploitables sur la façon de résoudre ces problèmes.

L'outil met en évidence sélecteurs et propriétés dupliqués d'anciens correctifs IE, d'anciens préfixes de fournisseurs et des sélecteurs redondants, ainsi que des sélecteurs complexes et des erreurs de syntaxe. Évidemment, vous pouvez plonger profondément dans chacune des sections et étudier quels sélecteurs ou règles sont spécifiquement écrasés ou répétés. C'est une excellente option pour découvrir certains des fruits faciles à manipuler et les résoudre rapidement.

Nous pouvons cependant aller un peu plus loin. Une fois que vous avez accédé à l'aperçu des anciens préfixes de fournisseurs, vous pouvez non seulement vérifier les contrevenants, mais aussi pour quels navigateurs ces préfixes conviennent. Ensuite, vous pouvez accéder à la configuration de votre Browserslist pour vérifier si vous ne diffusez pas trop de préfixes de fournisseurs et tester votre configuration sur Browsersl.ist ou via Terminal.

Project Wallace

Contrairement à d'autres outils, Project Wallace créé par Bart Veneman, conserve également l'historique de votre CSS au fil du temps. Vous pouvez utiliser des webhooks pour analyser automatiquement le CSS à chaque push dans votre CI. L'outil suit l'état de votre CSS au fil du temps en examinant des métriques spécifiques liées au CSS telles que sélecteur moyen par règle sélecteurs maximum par règle et déclarations par règle, ainsi qu'un aperçu général de la complexité CSS. [19659024] Lignes de code source montrant 19 894 règles totales, sélecteurs moyens par règle, déclarations par règle, prend en charge et prend en charge les hacks « />

Parker

Katie Fenn's Parker est un outil d'analyse de feuille de style en ligne de commande qui exécute des métriques sur vos feuilles de style et rend compte de leur complexité. Il fonctionne sur Node.js et, contrairement aux statistiques CSS, vous pouvez l'exécuter pour mesurer vos fichiers locaux, par exemple dans le cadre de votre processus de construction.

Audit CSS DevTools

Bien sûr, nous pouvons également utiliser le panneau Aperçu CSS de DevTools . (Vous pouvez l'activer dans les «Paramètres expérimentaux»). Une fois que vous avez capturé une page, il fournit un aperçu des requêtes multimédias, des couleurs et des déclarations de police, mais met également en évidence les déclarations inutilisées que vous pouvez supprimer en toute sécurité.

En outre, Couverture CSS renvoie un aperçu des CSS inutilisés sur une page. Vous pourriez même aller un peu plus loin et trouver en masse des CSS / JS inutilisés avec Puppeteer .

Avec la "Couverture de code" en place, en passant par quelques scénarios qui incluent beaucoup de tapotements, tabulations et redimensionnement de fenêtre, nous exportons également les données de couverture que DevTools collecte en JSON (via l'icône d'exportation / téléchargement). En plus de cela, vous pouvez utiliser Puppeteer qui fournit également une API pour collecter la couverture .

Nous avons mis en évidence certains détails, et quelques autres Conseils DevTools dans Chrome , Firefox et Edge dans Astuces et raccourcis DevTools utiles ici sur Smashing Magazine.

Quels outils utilisez-vous?

Dans l'idéal, un outil d'audit CSS fournirait des informations sur l'implication du rendu CSS performances, et quelles opérations conduisent à de coûteux recalculs de mise en page . Il pourrait également mettre en évidence les propriétés qui n'affectent pas du tout le rendu (comme le fait Firefox DevTools), et peut-être même suggérer comment écrire des sélecteurs CSS légèrement plus efficaces .

Ce ne sont que quelques outils que nous avons découverts – nous aimerions entendre vos histoires et vos outils qui fonctionnent bien pour identifier les goulots d'étranglement et résoudre les problèmes CSS plus rapidement. S'il vous plaît laissez un commentaire et partagez votre histoire dans les commentaires!

Et, bien sûr, bonne vérification et débogage CSS!

(vf, il)