Refactorisation de 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 plus de 12 000 lignes.

De toute évidence, le CSS est devenu lourd, de nombreux styles sont dupliqués et il est presque impossible de savoir combien de styles sont réellement utilisés.

Nous pouvons minimiser, mais cela ne résout pas vraiment le problème, retardant simplement l'inévitable retravail.

Donc, trois questions sont là des outils pour ...

• de-duplication de gros fichiers CSS?
• analyser le site et enregistrer la classe CSS et l'utilisation de l'ID?
• une telle numérisation pourrait-elle être réalisée avec un script quelconque, greasemonkey peut-être?

http://unused-css.com/ Fait une partie de ce que vous demandez, et ils ont ceci à dire: -

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 au fur et à mesure qu'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.

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.