Come faccio a identificare ed eliminare gli stili CSS inutilizzati dal mio foglio di stile gonfio?
-
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?
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