Comment identifier et éliminer les styles CSS inutilisés de ma feuille de style pléthorique?

StackOverflow https://stackoverflow.com/questions/3574136

  •  01-10-2019
  •  | 
  •  

Question

J'ai une feuille de style héritage qui est maintenant plein de styles inutilisés. Le problème est d'identifier le nécessaire du superflu. Y a-t-il des outils pour aider?

Était-ce utile?

La solution

CSS Utilisation est un Firefox add-in. Vous pouvez parcourir plusieurs pages et établirez quelles règles ont pas été utilisés sur aucun d'entre eux -. Il est plus précis qu'un outil qui scanne une page

Autres conseils

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

Installer le plugin pagespeed de Google pour Firebug:

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

Ensuite, dans Firebug, ouvrez l'onglet 'pagespeed' et, avec la 'performance' sélectionné, cliquez sur 'analyser les performances.

Si vous avez des règles de style non utilisés sur la page actuelle, puis avec beaucoup d'autres suggestions utiles, vous verrez un élément de la liste intitulée « Retirer Css non utilisée ». Cliquez pour agrandir et voir une ventilation par des ressources non utilisées règles CSS figurant sur la présente page, ainsi que la taille de la mémoire que vous économiserez en supprimant les règles inutilisées.

Ceci est juste une petite caractéristique de la boîte à outils pagespeed, que vous vous familiariser avec certainement si vous êtes tous intéressés par les performances de votre page sur le côté client.

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

outil appelé , "csscss" Enlève identifie dupliqué styles:

  

L'une des meilleures stratégies pour moi de maintenir CSS est de réduire   duplication autant que possible. Ce n'est pas une balle d'argent, mais il est certain   aide.

     

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

Il y a un plugin très pratique pour Grunt appelé UnCSS. Il supprimera automatiquement CSS utilisé à la volée. Consultez ce lien pour plus d'informations:

Retirer CSS non utilisée automatiquement à l'aide Grunt

Supprimer CSS non utilisée automatiquement à l'aide 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']);

};

npm install uncss -g

Ensuite

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top