Existe-t-il de bonnes approches pour aider à identifier les définitions CSS non utilisé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 œil à l'extension Firefox Dust-Me sur https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/ .

Les outils de développement Chrome ont un onglet Audits qui peut afficher les sélecteurs CSS inutilisés.

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

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

Semble bon, mais je devrais vérifier soigneusement son CSS «propre» en sortie avant de le télécharger sur l'un de mes sites.

De plus, comme avec tous ces outils, je devrais vérifier qu'il n'a pas supprimé les identifiants et les classes sans style, mais qu'ils sont utilisés comme sélecteurs JavaScript.

Le contenu ci-dessous est tiré de http://unused-css.com/, donc merci à eux pour avoir recommandé d'autres solutions:

Latish Sehgal a écrit une application Windows pour rechercher et supprimer les classes CSS inutilisées. Je ne l'ai pas testé mais d'après 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 v1.5 ou ultérieure) qui trouve les sélecteurs CSS inutilisés. Il extrait tous les sélecteurs de toutes les feuilles de style sur la page que vous consultez, puis analyse cette page pour voir lesquels de ces sélecteurs ne sont pas utilisés. Les données sont ensuite stockées de sorte que lors du test des pages suivantes, les sélecteurs puissent être rayés de la liste lorsqu'ils sont rencontrés. Cet outil est censé être capable d'araignée d'un site Web entier, mais j'ai malheureusement pu le faire fonctionner. De plus, je ne pense pas que vous puissiez configurer et télécharger le fichier CSS avec les styles supprimés.

Topstyle est une application Windows comprenant un tas d'outils pour éditer 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 les listes qui peuvent être supprimées "en toute sécurité". Cet outil est un module rubis et ne fonctionnera qu'avec le site Web de rails. Les sélecteurs inutilisés doivent être supprimés manuellement du fichier CSS.

Helium CSS est un outil javascript pour découvrir les CSS inutilisé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 démarrer 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 permettra pas de configurer et de télécharger des fichiers CSS propres. Il répertorie uniquement les fichiers CSS inutilisés.

Google Page Speed peut le faire pour vous (il fait en fait beaucoup plus que simplement vous dire quel CSS n'est pas utilisé). Sur FireFox, il est disponible en tant que module complémentaire FireBug. Ensuite, il existe également une version en ligne.

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

Vous souhaitez également utiliser Dust-Me avec cela.

Gardez à l'esprit que s'il existe un contenu qui n'est pas actuellement visible pour moi, vous pouvez jeter les styles dont vous avez besoin.

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

Utilisation CSS

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

CSS Usage 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 n'utilisez pas. Il vous permet d'indiquer quelles parties inutiles peuvent être supprimées. Vous devez absolument utiliser ce module complémentaire pour garder vos fichiers CSS aussi légers que possible.

Il semble que quelqu'un ait mis à jour les sélecteurs DustMe pour fonctionner à nouveau avec Firefox sous un nouveau nom - «CSS Roundup» http://blog.brothersmorrison.com/?p=198

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

Découvrez PageSpeed ​​de Google pour Firefox . Il fait cela, et beaucoup plus.

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