Comment identifier les définitions CSS inutilisées

Existe-t-il de bonnes approches pour identifier les définitions CSS inutilisées dans un projet? Un tas de fichiers CSS ont été récupérés et maintenant j’essaie de nettoyer un peu les choses.

Jetez un coup d’œil à l’extension Firefox Dust-Me sur https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .

Chrome Developer Tools possède un onglet Audits pouvant afficher les sélecteurs CSS non utilisés.

Exécuter un audit, puis, sous Performances de la page Web, voir Supprimer les règles CSS inutilisées

entrer la description de l'image ici

Je viens de trouver ce site – http://unused-css.com/

Cela semble bien, mais il faudrait que je vérifie minutieusement ses CSS «propres» en sortie avant de les télécharger sur l’un de mes sites.

De plus, comme pour tous ces outils, je devrais vérifier que les identifiants et les classes ne sont pas dépourvus de style, mais sont utilisés comme sélecteurs JavaScript.

Le contenu ci-dessous est extrait de http://unused-css.com/ alors merci de leur recommander d’autres solutions:

Latish Sehgal a écrit une application Windows pour trouver et supprimer les classes CSS inutilisées. Je ne l’ai pas testé mais à partir de la description, vous devez fournir le chemin de vos fichiers HTML et un fichier CSS. Le programme listera alors les sélecteurs CSS inutilisés. De la capture d’écran, il semble qu’il n’y ait aucun moyen d’exporter cette liste ou de télécharger un nouveau fichier CSS propre. Il semble également que le service soit limité à un seul fichier CSS. Si vous souhaitez nettoyer plusieurs fichiers, vous devez les nettoyer un par un.

Dust-Me Selectors est une extension Firefox (pour la version 1.5 ou ultérieure) qui détecte les sélecteurs CSS inutilisés. Il extrait tous les sélecteurs de toutes les feuilles de style sur la page que vous visualisez, puis parsing cette page pour voir lesquels de ces sélecteurs ne sont pas utilisés. Les données sont ensuite stockées afin que lors du test des pages suivantes, les sélecteurs puissent être rayés de la liste au fur et à mesure qu’ils sont rencontrés. Cet outil est censé pouvoir repérer un site Web entier, mais je pourrais malheureusement le faire fonctionner. En outre, je ne pense pas que vous pouvez configurer et télécharger le fichier CSS avec les styles supprimés.

Topstyle est une application Windows incluant un tas d’outils pour éditer les CSS. Je ne l’ai pas beaucoup testé, mais il semble qu’il ait la capacité de supprimer les sélecteurs CSS inutilisés. Ce logiciel coûte 80 USD.

Liquidcity CSS cleaner est un script php qui utilise des expressions régulières pour vérifier les styles d’une page. Il vous indiquera les classes qui ne sont pas disponibles dans le code HTML. Je n’ai pas testé cette solution.

Deadweight est un outil de couverture CSS. Étant donné un ensemble de feuilles de style et un ensemble d’URL, il détermine quels sélecteurs sont réellement utilisés et quelles listes peuvent être supprimées en toute sécurité. Cet outil est un module Ruby et ne fonctionnera qu’avec le site Web des rails. Les sélecteurs inutilisés doivent être supprimés manuellement du fichier CSS.

Helium CSS est un outil javascript permettant de découvrir des CSS non utilisés sur de nombreuses pages d’un site Web. Vous devez d’abord installer le fichier javascript sur la page que vous souhaitez tester. Ensuite, vous devez appeler une fonction hélium pour commencer le nettoyage.

UnusedCSS.com est une application Web avec une interface facile à utiliser. Tapez l’URL d’un site et vous obtiendrez une liste de sélecteurs CSS. Pour chaque sélecteur, un nombre indique combien de fois un sélecteur est utilisé. Ce service a quelques limitations. L’instruction @import n’est pas prise en charge. Vous ne pouvez pas configurer et télécharger le nouveau fichier CSS propre.

CSSESS est un bookmarklet qui vous aide à trouver des sélecteurs CSS inutilisés sur n’importe quel site. Cet outil est assez facile à utiliser mais il ne vous laissera pas configurer et télécharger des fichiers CSS propres. Il ne listera que les fichiers CSS non utilisés.

Google Page Speed peut le faire pour vous (cela fait beaucoup plus que simplement vous dire quel CSS est inutilisé). Sur FireFox, il est disponible en tant que module complémentaire FireBug. Il y a aussi une version en ligne.

Un meilleur CSS Minifier dans C # vide les styles redondants;

Vous voudriez également utiliser Dust-Me avec ceci.

Gardez à l’esprit que s’il existe un contenu qui n’est pas visible pour le moment, vous pourriez jeter des styles dont vous avez besoin.

EDIT: le lien a été rompu mais archive.org a à la fois la page et le code.

Il semblerait que quelqu’un ait mis à jour DustMe Selectors pour travailler à nouveau avec Firefox sous un nouveau nom – ‘CSS Roundup’ http://blog.brothersmorrison.com/?p=198

Utilisation CSS

Extension Firebug pour voir quelles règles CSS sont réellement utilisées.

Utilisation CSS est une extension pour Firebug (donc nécessaire d’avoir Firebug installé) qui vous permet de connaître les règles de style CSS inutilisées. Il identifie le CSS que vous utilisez et que vous n’utilisez pas. Il vous permet d’indiquer quelles parties inutiles peuvent être supprimées. Vous devriez certainement utiliser cet add-on pour garder vos fichiers CSS aussi légers que possible.

Utilisez la barre d’outils de développement d’Internet Explorer , ■ Affichage> Correspondances de sélecteur CSS : affichez un rapport de toutes les règles de style définies et le nombre de fois qu’elles sont utilisées sur la page en cours.

Découvrez le PageSpeed ​​de Google pour Firefox . Il le fait, et tout un chargement de plus.

Apparemment, un plugin Chrome est également en développement.