Outils pour auditer CSS

L'audit du code CSS n'est pas une tâche courante pour les tâches quotidiennes des développeurs, mais parfois cela doit être fait. Cela pourrait faire partie d'une évaluation des performances pour identifier le CSS critique et réduire les sélecteurs inutilisés; Il pourrait également s'agir d'améliorer l'accessibilité, d'effectuer des évaluations de contrastes sur toutes les couleurs utilisées dans la base de code; Il pourrait même s'agir de faire respecter la cohérence!

Pour une raison quelconque, et lorsque cela se produit, j'utilise généralement certains des outils décrits dans cet article. Mais avant d'introduire les outils, comprenons d'abord ce que signifie CSS "audité".

L'audit CSS n'est pas facile

En règle générale, l'audit du code implique l'analyse du code pour trouver des erreurs ou d'autres irrégularités, telles que des problèmes de performances possibles. Pour la plupart des langages de programmation, le concept d'audit du code est relativement simple: le code est valide ou non valide. Mais CSS est une langue spéciale, et ses erreurs sont principalement ignorées par le navigateur. De plus, vous pouvez implémenter le même style de différentes manières. Cela rend l'audit de CSS un peu difficile à dire le moins.

Vous pouvez utiliser l'extension de votre éditeur de code préféré ou configurer un inspecteur de code pour empêcher la découverte de ces erreurs. Mais ce n'est pas ce que je veux montrer ici, et ce n'est pas suffisant. Nous pouvons encore utiliser trop de couleurs, de définitions de typographie ou d'index Z, qui peuvent tous conduire à une base de code CSS désordonnée et difficile à maintenir.

Pour vérifier véritablement le CSS, nous devons creuser plus profondément et trouver des endroits qui ne sont pas considérés comme les meilleures pratiques. Pour trouver ces endroits, nous pouvons utiliser les outils suivants.

Outils de développeur de navigateur

Jetons un coup d'œil aux outils utilisés pour l'audit CSS dans Chrome Developer Tools. J'utilise le navigateur courageux basé sur le chrome ici. Vous voudrez peut-être également consulter cet article par Umar Hansa, qui compile tout un tas de grandes fonctionnalités Devtool publiées en 2020.

Si vous préférez vérifier manuellement votre code CSS, vous pouvez utiliser l'outil Inspecter . L'utiliser, nous pouvons voir le code CSS appliqué à un élément spécifique. À l'aide de la flèche Inspecter, nous pouvons même voir plus de détails sur la couleur, la police, la taille et l'accessibilité.

Inspecteur de grille et de flexion

Il y a beaucoup de détails pratiques dans l'interface Devtools, mais mes favoris sont les inspecteurs de la grille et flexibles. Pour les activer, accédez aux paramètres (l'icône de pignon dans le coin supérieur droit de l'outil de développeur), cliquez sur l'expérience et activez la grille CSS et le débogage Flexbox. Bien que cet outil soit principalement utilisé pour déboguer les problèmes de mise en page, je l'utilise parfois pour déterminer rapidement si une grille CSS ou Flexbox est utilisée sur la page.

Présentation du CSS

La vérification du CSS est très basique et toutes les opérations doivent être effectuées manuellement. Regardons les fonctionnalités de Devtools plus avancées.

La vue d'ensemble du CSS en fait partie. Pour activer l'outil de vue d'ensemble CSS, accédez aux paramètres, cliquez sur Experiment, puis activez l'option CSS Présentation. Pour ouvrir le panneau de vue d'ensemble CSS, vous pouvez utiliser les touches de raccourci CMD Shift P, taper "Présentation CSS", puis sélectionner "Afficher la vue d'ensemble CSS". Cet outil résume les propriétés CSS telles que la couleur, la police, les problèmes de contraste, les réclamations inutilisées et les requêtes médiatiques. J'utilise généralement cet outil pour voir à quel point le code CSS est bon ou mauvais. Par exemple, s'il y a «50 nuances de gris» ou trop de définitions de composition, cela signifie que le guide de style n'est pas suivi, ou que le guide de style peut ne pas exister du tout.

Panneau de couverture de code

Couverture de code L'outil affiche le montant et le pourcentage du code utilisé sur la page. Pour le visualiser, utilisez la touche de raccourci CMD Shift P, tapez "Couverture", sélectionnez Afficher la couverture du code, puis cliquez sur l'icône "Rafraîchir".

Vous pouvez filtrer uniquement les fichiers CSS en tapant ".css" dans l'entrée du filtre URL. J'utilise généralement cet outil pour comprendre les techniques de livraison du site. Par exemple, si je vois que la couverture est assez élevée, je peux supposer que chaque page générera un fichier CSS séparément. Ce n'est peut-être pas des données critiques, mais parfois, cela aide à comprendre les stratégies de mise en cache.

Panneau de rendu

Les panneaux de rendu sont un autre outil utile. Pour ouvrir le panneau de rendu, utilisez à nouveau CMD Shift P, tapez "Rendre" cette fois et sélectionnez l'option "Afficher le rendu". Cet outil a de nombreuses options, mais mes options préférées sont:

• Draw Flash - Souffle un rectangle vert lorsqu'un événement de redessine se produit. Je l'utilise pour identifier les zones qui rendent trop longtemps.
• Zone de décalage de disposition - Sout un rectangle bleu lorsqu'un décalage de disposition se produit. Pour tirer le meilleur parti de ces options, je définis généralement le lent préréglage 3G sous l'onglet réseau. J'enregistre parfois l'écran, puis ralentit la vidéo pour trouver le décalage de mise en page.
• Statistiques de rendu de trame - Souffle l'utilisation en temps réel du GPU et des cadres. Cet outil est très pratique lors de l'identification des problèmes d'animation lourds et de défilement.

Ces outils ne sont pas impliqués par des audits réguliers, mais j'ai trouvé crucial de comprendre les performances du code CSS et de ne pas drainer l'énergie de l'appareil.

D'autres options peuvent être plus propices aux problèmes de débogage, tels que l'émulation et la désactivation de diverses fonctionnalités, forçant la fonctionnalité préfabriquée ou les types de supports d'impression, et désactiver les polices locales.

Moniteur de performance

Un autre outil pour auditer les performances du code CSS est le moniteur de performances . Pour l'activer, utilisez à nouveau CMD Shift P, tapez "Performance Monitor" et sélectionnez l'option Show Performance Monitor. J'utilise généralement cet outil pour voir combien de recalculs et de dispositions sont déclenchés lors de l'interaction avec une page ou lorsqu'une animation se produit.

Panneau de performance

Performance Le panneau affiche une vue détaillée de tous les événements du navigateur pendant le chargement de la page. Pour activer les outils de performance, effectuez CMD Shift P, tapez les performances, sélectionnez Afficher les performances, puis cliquez sur l'icône de rechargement. Je permette généralement la capture d'écran et les options de métriques Web. Les mesures les plus intéressantes pour moi sont le premier tirage, le premier tirage de contenu, le décalage de mise en page et le tirage au maximum de contenu. Il y a aussi un graphique à tarte montrant les temps de dessin et de rendu.

Devtools peut ne pas être considéré comme un outil d'audit classique, mais il peut nous aider à comprendre quelles fonctionnalités CSS sont utilisées, l'efficacité du code et ses performances, tous des facteurs clés de l'audit.

Outils en ligne

Devtools est juste un outil puissant. Mais nous pouvons également utiliser d'autres outils disponibles pour auditer CSS.

Outils de visualisation spécifiques

L'outil de visualisation de spécificité montre la spécificité des sélecteurs CSS dans la base de code. Visitez simplement le site et collez le CSS.

Le graphique principal montre la relation entre la spécificité et la position dans la feuille de style. Deux autres graphiques montrent une utilisation spécifique. J'utilise souvent ce site pour trouver des "mauvais" sélecteurs. Par exemple, si je vois de nombreuses spécificités marquées en rouge, je peux facilement conclure que le code peut être amélioré. Il est utile d'économiser des captures d'écran pour référence lorsque vous travaillez dur pour vous améliorer.

Générateur de graphiques spécifiques au CSS

Le générateur du graphique de spécificité CSS est un outil similaire pour visualiser la spécificité. Il montre un graphique légèrement différent, qui peut vous aider à comprendre comment les sélecteurs CSS sont organisés par spécificité. Comme le dit la page de l'outil, "Le pic n'est pas bon, et la tendance globale devrait être que la spécificité derrière la feuille de style augmente de plus en plus." Il est intéressant de discuter davantage, mais c'est au-delà de la portée de cet article. Cependant, Harry Roberts écrit cela largement dans son article «Specialty Charts» et cela vaut le coup.

Statistiques du CSS

CSS Statistics est un autre outil qui fournit une analyse et une visualisation de vos feuilles de style. En fait, Robin a déjà écrit un article à ce sujet et a montré comment il l'avait utilisé pour auditer des feuilles de style à son travail.

Il vous suffit de saisir l'URL du site et d'appuyer sur Entrée. Les informations sont décomposées en parties significatives, du comptage des déclarations à la couleur, à la typographie, à l'index z, à la spécificité, etc. Encore une fois, vous devrez peut-être stocker les captures d'écran pour référence future.

Projet Wallace

Project Wallace a été créé par Bart Veneman, qui a couvert le projet sur CSS-Tricks ici. La puissance du projet Wallace est qu'elle peut comparer et visualiser les changements en fonction du contenu importé. Cela signifie que vous pouvez afficher l'état précédent de la base de code CSS et voir comment le code change entre les états. J'ai trouvé cette fonctionnalité très utile, surtout si vous voulez convaincre quelqu'un que le code s'est amélioré. L'outil est gratuit pour un seul projet et propose des plans payants pour plus de projets.

Outils CLI

En plus des outils Devtools et en ligne, il existe des outils d'interface de ligne de commande (CLI) qui aident à auditer CSS.

Pendier

L'un de mes outils CLI préférés est Wallace . Après l'installation, tapez Wallace, puis tapez le nom du site. La sortie montre toutes les informations que vous devez connaître sur le code CSS du site. Ma chose préférée à afficher est le nombre d'utilisations de! IMPORTANT et le nombre d'ID dans le code. Un autre message concis est le numéro de spécificité le plus élevé et le nombre de sélecteurs utilisés. Il peut s'agir de drapeaux rouges pour les "mauvais" codes.

Ce que j'aime le plus dans cet outil, c'est qu'il extrait tout le code CSS du site, non seulement des fichiers externes, mais aussi du code en ligne. C'est pourquoi les rapports des statistiques CSS et Wallace ne correspondent pas.

CSSCSS

L'outil CSSCSS CLI affiche les règles qui partagent la même déclaration. Ceci est utile pour identifier le code en double et réduire la quantité de code écrite. Je réfléchirai à deux fois avant de faire cela, en particulier sous le mécanisme de mise en cache d'aujourd'hui. Il convient de mentionner que les CSSCS nécessitent du rubis.

Autres outils utiles

D'autres outils CSS peuvent ne pas être utilisés pour l'audit, mais sont toujours utiles. Liscons-nous aussi:

• Trieur de couleur - effectuez les couleurs CSS par teinte, puis par saturation.
• CSS Analyzer - Créés l'analyse des chaînes CSS.
• Constyble - Il s'agit d'un vérificateur de code de complexité CSS basé sur l'analyseur CSS.
• Extraire CSS maintenant - Obtenez tous les CSS à partir d'une seule page Web.
• Obtenez CSS - Crawl All CSS sur la page.
• UCSS - Crawl sur le site Web pour identifier les CS inutilisés.

en conclusion

CSS est tout autour de nous et nous devons le considérer comme des citoyens de première classe de chaque projet. Ce que les autres pensent de votre CSS n'est pas important, mais ce que vous en pensez est vraiment important. Si votre CSS est organisé et bien écrit, vous passerez moins de temps à le déboguer et plus de temps à développer de nouvelles fonctionnalités. Idéalement, nous éduquons tout le monde à écrire un bon CSS, mais cela prend du temps.

Faites aujourd'hui le jour où vous commencez à vous concentrer sur le code CSS.

Je sais que l'audit CSS n'est pas une chose intéressante pour tout le monde. Cependant, si vous exécutez votre code avec l'un de ces outils et essayez d'améliorer n'importe quelle partie de la base de code CSS, cet article termine sa tâche.

J'ai prêté plus d'attention au code CSS ces derniers temps et je travaille à faire en sorte que plus de développeurs écrivent le code CSS avec plus de respect. J'ai même lancé un nouveau projet sur CSS-auditors.com (encourager les domaines en trait d'union!) Ce qui est dédié à l'audit du CSS.

Si vous connaissez d'autres outils, faites-le moi savoir dans les commentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!