¿Cómo puedo identificar y eliminar los estilos CSS no utilizados de mi hoja de estilo hinchado?

Question

Tengo una hoja de estilo legado que ahora está lleno de estilos no utilizados. El problema es la identificación de lo necesario de lo innecesario. ¿Existe alguna herramienta para ayudar con esto?

Answer 1

CSS Uso es un gran complemento de Firefox en. Puede navegar por varias páginas y funcionará qué reglas no han sido utilizados en cualquiera de ellos -. Por lo que es más preciso que una herramienta que escanea una sola página

Answer 2

Se puede probar con el Firefox Polvo-Me selectores complemento.

Answer 3

Instalar plugin de Page Speed ??de Google para Firebug:

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

A continuación, en Firebug, abra la pestaña 'Page Speed' y, con el 'rendimiento' seleccionado, haga clic en 'analizar el rendimiento'.

Si usted tiene reglas de estilo utilizadas en la presente página, a continuación, junto con muchas otras sugerencias útiles, verá un elemento de la lista con la etiqueta "Eliminar Css no utilizado". Haga clic para expandir y ver un desglose por recursos no utilizados de reglas CSS que aparecen en la presente página, junto con el tamaño de la memoria que va a ahorrar mediante la eliminación de las reglas no utilizados.

Esto es sólo una pequeña función del conjunto de herramientas Page Speed, que definitivamente se familiarice con si usted está interesado en absoluto en el rendimiento de su página en el lado del cliente.

Es posible que también esté interesado en YSlow, una herramienta similar para Firebug desarrollado por Yahoo.

Answer 4

herramienta llamada , elimina "csscss" identifica duplica estilos:

  

Una de las mejores estrategias para mí para mantener la CSS es reducir   la duplicación tanto como sea posible. No es una bala de plata, pero seguro   ayuda.

     

Para hacer eso, es necesario tener todos los conjuntos de reglas en su cabeza a todos   veces. Eso es difícil, csscss es fácil. Deja que te diga lo que es redundante.

Answer 5

Hay un plugin muy útil para ronco llamada UnCSS. Se eliminará automáticamente CSS sin usar sobre la marcha. Echa un vistazo a este enlace para más información:

Retire CSS sin usar automáticamente ronco

Answer 6

Eliminar CSS sin usar automáticamente ronco

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']);

};

Answer 7

npm install uncss -g

Entonces

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