Refactoriser des fichiers CSS volumineux / anciens
Je travaille actuellement sur un site Web de 100 000 pages. La conception actuelle est en place depuis plus de 5 ans et les mises à jour successives ont abouti à quatre fichiers CSS de 12 000 lignes ou plus.
Évidemment, le CSS est devenu lourd, beaucoup de styles sont dupliqués et il est presque impossible de savoir combien de styles sont réellement utilisés.
Nous pouvons minimiser, mais ce n'est pas vraiment résoudre le problème, mais simplement retarder l'inévitable remaniement.
Donc, il y a trois questions outils pour la ...
- supprimer la duplication de gros fichiers CSS?
- analyse du site et enregistrement de l'utilisation de la classe et de l'ID CSS?
- une telle numérisation peut-elle être réalisée avec un script quelconque, greasemonkey peut-être?
http://unused-css.com/ Une partie de ce que vous demandez, et ils ont ceci à dire: -
Latish Sehgal a écrit une application Windows pour trouver 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 d'un fichier CSS. Le programme listera alors les sélecteurs CSS non utilisé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 est limité à un fichier CSS. Si vous souhaitez nettoyer plusieurs fichiers, vous devez les nettoyer un par un.
Dust-Me Selectors est une extension de Firefox (à partir de v1.5) qui trouve des sélecteurs CSS inutilisés. Il extrait tous les sélecteurs de toutes les feuilles de style de 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 au fur et à mesure de leur apparition. Cet outil est supposé être capable de parcourir tout un site, 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.
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. À partir d'un ensemble de feuilles de style et d'un ensemble d'URL, il détermine les sélecteurs réellement utilisés et les listes pouvant être supprimées "en toute sécurité". Cet outil est un module Ruby et ne fonctionnera qu'avec le site Web Rails. Les sélecteurs non utilisés doivent être supprimés manuellement du fichier CSS.
Helium CSS est un outil javascript permettant de 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 à l'hélium pour lancer 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 permet pas de configurer et de télécharger des fichiers CSS propres. Il ne listera que les fichiers CSS inutilisés.