Herramienta para eliminar CSS no utilizado

Debo decir que creo que esta opción es mejor que mi recomendación original; mi recomendación original fue excelente para una búsqueda rápida, esto es mejor para hacer paquetes de lanzamiento.

UnCSS y específicamente en lo que estoy basando la recomendación es el envoltorio The Grunt para UnCSS ; que, por supuesto, se integra en el sistema de compilación Grunt para una gran automatización.

Hay bastantes opciones de personalización ( enumeradas en detalle también ), y admite archivos css locales y remotos como fuentes.

Si lo usa en Grunt , sugiero usarlo junto con grunt-processhtml para hacer que su (s) página (s) haga referencia automáticamente a los nuevos archivos css concatenados y limpios.

Cómo lo uso: (un recorte de mi gruntfile.js)

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uncss: {
        main: {
            options: {
                report: 'gzip'
            },
            files: {
                '<%= grunt.option("outpath") %>/css/cleaned.css' : '<%= src_files_html %>',
            }
        }
    },
    processhtml: {
        main : {
            options: {
                strip: false
            },
            files: [{
                expand: true,
                cwd: '',
                src: '<%= src_files_html %>',
                dest: '<%= grunt.option("outpath") %>'
            }]
        }
    }

y luego en mi archivo html tengo esto:

    <!-- build:css ./css/cleaned.min.css -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
    <link href="./css/style.css" rel="stylesheet">
    <!-- /build -->

que se transforma en:

<link rel="stylesheet" href="./css/cleaned.min.css">

y el CSS es mucho más pequeño y mejor para el rendimiento y el ancho de banda móvil.

Tengo una gran opción, al menos me encanta, aunque no es una aplicación web ni una aplicación de Linux.

Recomiendo el uso de CSS del complemento de Firefox ; requiere Firefox y el complemento Firebug de Firefox .

Uso:

• simplemente cargue la página (a través de la web, localhost (como en mi imagen) o incluso solo el sistema de archivos,
• abre la consola de firebug y haz clic en la pestaña de uso de css
• Hacer clicSCAN
• revise y si desea exportar css limpio (solo desde el sistema de archivos funciona de manera confiable, aunque eso debería ser una solución menor para el complemento, lo que puedo hacer en algún momento).

Desafortunadamente, el css limpio exportado tiene algunas molestias; algunas reglas se eliminan (buenas) pero algunas tienen el prefijo UNUSED.Debería haber una opción IMO para simplemente eliminarlas también, pero actualmente no creo que haya (al menos si es así, nunca lo he encontrado).

Como solución alternativa, lo que siempre he hecho es simplemente copiar y pegar en Notepad ++ y usar la búsqueda y reemplazar con esta expresión regular como la cadena de búsqueda: UNUSED\..*?\}(y seleccionar . matches newlines) y un reemplazo en blanco para simplemente deshacerme de ellos. - para hacer lo mismo en Sublime que usaría (?s)UNUSED\..*?\}como expresión regular. La mayoría de los otros buenos editores de texto deberían tener una funcionalidad similar.

He creado esta herramienta de eliminación de CSS no utilizada en línea basada en navegador .

Características:

1. Basado en navegador. Nada que instalar.
2. Comprueba CSS contra múltiples URL.
3. Proporciona opciones para seleccionar/deseleccionar manualmente elementos en el archivo CSS.
4. Se puede descargar y ejecutar en su host local para direcciones URL ilimitadas
5. Código de fuente abierta

Descargo de responsabilidad: soy el autor del código.

IntelliJ IDEA tiene algunas potentes funciones de desarrollo web :

• funciona con Windows/Mac/Linux
• detecta definiciones de clase CSS no utilizadas

Sin embargo, debe tener Ultimate Edition para tener acceso a las funciones de desarrollo web (gratis si es el líder del proyecto o un comprometido habitual en un proyecto de código abierto).

Escribimos una herramienta en línea gratuita para esto: UnusedCSS

Rastrea recursivamente su sitio web (siguiendo enlaces internos) y encuentra selectores no utilizados (muchas otras herramientas procesan una sola página).

He usado el uso de CSS del complemento Firebug en algunos proyectos antes; el único inconveniente es que tiene que navegar manualmente por todo el sitio para obtener un mapa preciso de los estilos que se usan.

Sin embargo, le dará versiones simplificadas de sus archivos css que puede usar para reemplazar sus hojas de estilo actuales.