Outils d'audit CSS

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 fournisseur, et si oui, comment les repérer 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. Passons donc en revue certains d'entre eux.

Statistiques CSS

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 également tous les styles en groupes , de la mise en page et de la structure à l'espacement, à la typographie, aux piles de polices et aux couleurs.

L'une des fonctionnalités utiles fournies par CSS Stats est le score de spécificité CSS , qui montre à quel point certains des sélecteurs sont inutilement spécifiques. Des scores plus bas et des courbes plus plates sont meilleurs 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 situent les principaux problèmes de votre CSS et sur quoi se concentrer.

Outils de laboratoire jaunes

Yellow Lab Tools est un outil gratuit d'audit des performances Web, mais il comprend é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 les sélecteurs et les propriétés en double , les anciens correctifs IE, les anciens préfixes de fournisseur et les sélecteurs redondants, ainsi que les sélecteurs complexes et les erreurs de syntaxe. Évidemment, vous pouvez plonger profondément dans chacune des sections et étudier quels sélecteurs ou règles spécifiques sont écrasés ou répétés. C'est une excellente option pour découvrir certains des fruits à portée de main et les résoudre rapidement.

Nous pouvons cependant aller un peu plus loin. Une fois que vous avez puisé dans l'aperçu des anciens préfixes de fournisseurs, vous pouvez non seulement vérifier les contrevenants, mais également les navigateurs pour lesquels ces préfixes sont compatibles. Ensuite, vous pouvez vous diriger vers la configuration de votre liste de navigateurs pour vérifier si vous ne servez pas trop de préfixes de fournisseur et tester votre configuration sur Browsersl.ist ou via Terminal.

Visualiseur de spécificité CSS

CSS Specificity Visualizer fournit une vue d'ensemble des sélecteurs CSS et de leurs spécificités dans un fichier CSS. Une fois que vous soumettez une feuille de style, l'outil renvoie un graphique de spécificité. L'axe des x montre l'emplacement physique des sélecteurs dans le CSS, disposés de gauche à droite, avec le premier à gauche et le dernier à droite. L'axe des ordonnées montre la spécificité réelle des sélecteurs , en commençant par le moins spécifique en bas et en terminant par le plus spécifique en haut.

En général, une spécificité élevée est généralement un drapeau rouge , alors faites attention aux graphiques pointus et à la quantité élevée de bruit. D'un autre côté, un graphique à tendance ascendante avec une faible spécificité globale et une faible quantité de bruit peut être considéré comme "bon". Vous pouvez également survoler des points de données uniques pour voir le sélecteur exact ou zoomer sur les zones d'intérêt.

Projet Wallace

Contrairement à d'autres outils, Project Wallace, créé par Bart Veneman, conserve en outre l'historique de votre CSS au fil du temps. Vous pouvez utiliser des webhooks pour analyser automatiquement le CSS à chaque poussée 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 le sélecteur moyen par règle , le nombre maximal de sélecteurs par règle et les déclarations par règle, ainsi qu'un aperçu général de la complexité du CSS.

Parker

Parker de Katie Fenn est un outil d'analyse de feuilles de style en ligne de commande qui exécute des métriques sur vos feuilles de style et rend compte de leur complexité. Il s'exécute sur Node.js et, contrairement à CSS Stats, 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 de présentation CSS de DevTools. (Vous pouvez l'activer dans les "Paramètres expérimentaux"). Une fois que vous avez capturé une page, elle 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é.

De plus, la couverture CSS renvoie un aperçu des CSS inutilisés sur une page. Vous pouvez 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 tapotement, de tabulation et de redimensionnement de fenêtre, nous exportons également les données de couverture que DevTools collecte au format 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 astuces DevTools dans Chrome , Firefox et Edge dans Conseils et raccourcis utiles DevTools ici sur Smashing Magazine.

Vérification du style

Comment vérifiez-vous habituellement l'effet de votre CSS sur les éléments HTML ? Directement dans votre projet ou avez-vous un fichier HTML de test dédié qui inclut tous les éléments HTML que vous utilisez pour voir tout le style en un coup d'œil ? Austin Gill a créé un petit outil qui adopte une approche similaire : Style Check. L'avantage : vous n'aurez pas besoin de configurer vous-même un fichier HTML de test, l'outil le fait pour vous.

Téléchargez simplement votre fichier .css dans Style Check pour vérifier son effet sur les éléments HTML simples. Vous pouvez également sélectionner une bibliothèque (Bedrocss, Bootstrap, Eric Meyer's CSS Reset et Normalize.css sont disponibles) ou entrer des styles en ligne. Les éléments vont des titres et des paragraphes aux médias, aux listes et aux tableaux, aux boutons, aux formulaires, ainsi qu'à d'autres types d'entrées et aux détails tels que les indices et les exposants, le code, les guillemets et bien plus encore. Une petite aide pratique.

Quels outils utilisez-vous ?

Idéalement, un outil d'audit CSS fournirait des informations sur l'impact du CSS sur les performances de rendu et sur les opérations qui entraînent des recalculs de mise en page coûteux . Cela 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 là 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!

Vous pouvez également vous abonner à notre sympathique newsletter par e-mail pour ne pas manquer les prochains articles comme celui-ci. Et, bien sûr, bon audit et débogage CSS !