Comment nettoyer les styles CSS inutiles, le savez-vous ?

Lorsque nous écrivons des styles CSS, nous rencontrons souvent des modifications de style CSS ou des changements de conception d'interface. Après que le CSS de la page ait été modifié pour plusieurs versions, certains styles peuvent avoir été utilisés. , peut-être que certains styles ont été renommés et que ceux d'origine ont été oubliés pour être supprimés. Bref, il peut y avoir des styles inutiles sur la page.

Ces gaspillages inutiles d'espace serveur et de consommation de bande passante augmenteront également nos coûts de maintenance. Alors, existe-t-il des moyens de nettoyer ces styles inutiles ? Aujourd'hui, jetons un coup d'œil à certains des outils les plus utiles.

1. Sélecteurs Dust-Me

Dust-Me est un plug-in Firefox très utile et facile à utiliser. Il peut analyser tous les appels de votre. page. Fichiers CSS et analysez ceux qui ne sont pas utilisés dans la page.

Prend en charge les fichiers de style locaux et distants, y compris les fichiers de style introduits à l'aide des balises , des instructions de traitement , des instructions @import, etc. style> block et styles en ligne)

prend en charge les fichiers de style introduits dans les commentaires conditionnels d'IE

peut vérifier une page ou l'ensemble du site Web

prend en charge les sélecteurs CSS1, la plupart des CSS2 et ; Sélecteurs CSS3 ;

Comprendre les hacks CSS courants, tels que "* html #fuck-ie" sera considéré comme "html #fuck-ie"

Prend en charge Firefox 3.5 et Firefox 3.0. , grâce aux améliorations du moteur js de FF 3.5, les performances de FF 3.5 sont 50 % supérieures à celles de FF 3.0.

Installation : Cliquez ici. En même temps, vous pouvez télécharger le code source du projet. Pour plus d'informations, veuillez visiter. Page officielle du sélecteur Dust-Me.

2. Page Speed

Page Speed ​​​​est un outil d'analyse des performances front-end fourni par Google. Il est quelque peu similaire à YSlow, mais il en fournit plus. des outils personnalisés et utiles, tels que Supprimer les CSS inutilisés :

Page Speed ​​​​s'appuie sur Firebug tout comme YSlow.

Page Speed ​​​​s'appuie sur Firebug comme YSlow Pour plus de détails et l'installation, veuillez visiter ici.

3. CSS Redundancy Checker

CSS Redundancy Checker est une application en ligne gratuite qui peut vérifier toutes les pages qui utilisent un certain fichier CSS pour les styles inutiles. Vous pouvez vérifier l'utilisation d'un certain style sur plusieurs pages en même temps.

L'inconvénient de cet outil est que bien qu'il puisse vérifier plusieurs pages HTML à la fois, il ne peut vérifier qu'un seul fichier CSS à la fois, et il doit être saisi manuellement :

4. IntelliJ IDEA

IntelliJ IDEA Il s'agit d'un IDE assez puissant, similaire à DreamWeaver, mais il n'est pas beaucoup utilisé en Chine. Le logiciel comprend un outil d'analyse de code à la volée qui peut analyser les classes et les identifiants inutilisés dans les fichiers CSS.

5. Expression Web

Expression Web, en tant qu'outil de développement de sites Web de nouvelle génération de Microsoft, est toujours utilisé par de nombreuses personnes. Sa fonction de rapport CSS permet de vérifier les besoins inutilisés en CSS effacé. (Je n'ai jamais utilisé EW pour développer un site Web, j'espère que les enfants qui utilisent ce logiciel pourront m'aider à le confirmer).

Résumé :

Bien sûr, il peut y avoir d'autres outils non mentionnés ici. Si vous savez quelque chose, vous pouvez le partager avec tout le monde.

De plus, nous écrivons généralement le style de l'ensemble du site Web dans un ou plusieurs fichiers de style, puis nous les appelons tous dans la page ou dans des modules. Dans l'article de 52CSS.com sur l'organisation des fichiers de style de site Web, Il y a eu des présentations.

Ensuite, le style d'un certain fichier CSS peut ne pas être utilisé dans une certaine page mais est utilisé dans d'autres pages. Par conséquent, lorsque vous utilisez ces outils pour détecter les styles redondants dans les fichiers CSS, vous devez rester prudent, effacer le style peut affecter d'autres pages

Ainsi, les résultats de vérification fournis par la vitesse de la page ne s'appliquent qu'à une seule page, pas à l'ensemble du site Web, mais vous pouvez le vérifier en utilisant Dust-Me ou CSS Redundancy Checker Vérification de l'intégralité Le site Web ou plusieurs pages du site Web en même temps peuvent éviter des erreurs.

Merci à tous d'avoir lu, j'espère que vous en bénéficierez beaucoup.

Cet article est reproduit à partir de : https://blog.csdn.net/wuchengzhi82/article/details/8669052

Tutoriel recommandé : "Tutoriel CSS"

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!