Come faccio a identificare ed eliminare gli stili CSS inutilizzati dal mio foglio di stile gonfio?

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

  •  01-10-2019
  •  | 
  •  

Domanda

Ho un foglio di stile eredità che è ora pieno di stili non utilizzati. Il problema è identificare il necessario dal superfluo. Ci sono strumenti per aiutare con questo?

È stato utile?

Soluzione

CSS Uso è un grande Firefox add-in. È possibile sfogliare più pagine e sarà capire quali regole non sono state utilizzate su uno di essi -. Quindi è più preciso di uno strumento che esegue la scansione di una singola pagina

Altri suggerimenti

Si potrebbe provare Firefox Dust-Me Selectors add-on.

Installa plug-in di Google Page Speed ??per Firebug:

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

Poi, nel Firebug, aprire la scheda 'Speed' e, con 'prestazioni' selezionato, fare clic su 'analizzare le prestazioni'.

Se si dispone di regole di stile non utilizzati sul presente pagina, poi insieme con un sacco di altri suggerimenti utili, si vedrà un elemento dell'elenco con l'etichetta "Remove Css non utilizzato". Fare clic per espandere e vedere una ripartizione per risorsa di regole CSS inutilizzati che appaiono sulla pagina attuale, insieme con la dimensione della memoria che vi farà risparmiare rimuovendo le regole non utilizzate.

Questa è solo una piccola caratteristica del toolkit Page Speed, che è sicuramente familiarizzare con se siete affatto interessati a vostra performance pagina sul lato client.

si può essere interessati anche in YSlow, uno strumento simile per firebug sviluppato da Yahoo.

strumento chiamato , "csscss" rimuove identifica duplicato stili:

  

Una delle migliori strategie per me per mantenere CSS è quello di ridurre   la duplicazione, per quanto possibile. Non è un proiettile d'argento, ma è certo che   aiuta.

     

Per fare questo, è necessario disporre di tutti i set di regole in testa a tutti   volte. E 'difficile, csscss è facile. Lascia che ti dica cosa è ridondante.

C'è un plugin molto utile per Grunt chiamato UnCSS. Esso rimuoverà automaticamente inutilizzato CSS al volo. Dai un'occhiata a questo link per maggiori informazioni:

rimuovere automaticamente inutilizzato CSS utilizzando Grunt

Rimuovi inutilizzato CSS utilizzando automaticamente 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

Poi

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top