web-dev-qa-db-fra.com

Comment identifier et éliminer les styles CSS inutilisés de ma feuille de style gonflée?

J'ai une feuille de style héritée qui est maintenant pleine de styles inutilisés. Le problème est d'identifier le nécessaire de l'inutile. Y at-il des outils pour aider avec cela?

cssstylesheetdefunct
34
Cornish

Utilisation de CSS est un excellent complément de Firefox. Vous pouvez parcourir plusieurs pages et déterminer quelles règles n'ont été utilisées sur aucune d'entre elles. Il est donc plus précis qu'un outil qui numérise une seule page.

26
Fenton

Vous pouvez essayer Firefox Dust-Me Selectors add-on.

3
Mike

Installez le plug-in pagespeed de Google pour firebug:

http://code.google.com/speed/page-speed/

Ensuite, dans Firebug, ouvrez l'onglet "Pagespeed" et, lorsque "Performance" est sélectionné, cliquez sur "Analyser les performances". 

Si vous avez des règles de style inutilisées sur la page actuelle, alors avec de nombreuses autres suggestions utiles, vous verrez un élément de la liste intitulé "Supprimer les fichiers non utilisés". Cliquez pour développer et voir la répartition par ressource des règles css non utilisées apparaissant sur la présente page, ainsi que la taille de la mémoire que vous allez économiser en supprimant les règles inutilisées.

Il ne s'agit là que d'une petite fonctionnalité de la boîte à outils pagespeed, avec laquelle vous vous familiariserez certainement si vous êtes du tout intéressé par les performances de votre page côté client.

Vous pouvez également être intéressé par yslow, un outil similaire développé par Yahoo pour Firebug.

2
alegscogs

UnCSS est un plugin très pratique pour Grunt. Il supprimera automatiquement les CSS inutilisés à la volée. Consultez ce lien pour plus d'informations:

Supprimer les CSS non utilisées automatiquement à l'aide de Grunt

1
Deano

Cet outil appelé , "csscss" supprime les styles en double:

Une des meilleures stratégies pour moi de maintenir CSS est de réduire autant que possible . Ce n’est pas une solution miracle, mais cela aide .

Pour faire cela, vous devez avoir tous les jeux de règles dans votre tête à tout moment . C’est difficile, csscss est facile. Laissez-le vous dire ce qui est redondant.

1
chrisjlee

npm install uncss -g

Ensuite

uncss http://example.com/ > out.css

0
Jonathan

Supprimer automatiquement les CSS non utilisées à l'aide de Grunt

Gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({
        uncss: {
            dist: {
                files: [
                    { src: 'index.html', dest: 'css/test.css' }
                ]
            }
        },
      cssmin: {
            dist: {
                files: [
                    { src: 'css/test.css', dest: 'cleancss/testmin.css' }
                ]
            }
        }
    });

    // Load the plugins
    grunt.loadNpmTasks('grunt-uncss');
    grunt.loadNpmTasks('grunt-contrib-cssmin');

    // Default tasks.
    grunt.registerTask('default', ['uncss', 'cssmin']);

};
0
Pranay Soni