selectores - selector padre css

¿Cómo identifico y elimino los estilos CSS no utilizados de mi hoja de estilos inflada?

Question

Tengo una hoja de estilo heredada que ahora está llena de estilos sin usar. El problema es identificar lo necesario de lo innecesario. ¿Hay alguna herramienta para ayudar con esto?

Answer 1

Eliminar CSS sin usar automáticamente con 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'']);
};

Answer 2

Esta herramienta llamada "csscss" elimina identifica estilos duplicados:

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

Para hacer eso, necesitas tener todos los conjuntos de reglas en tu cabeza en todo momento. Eso es difícil, csscss es fácil. Deja que te diga lo que es redundante.

Answer 3

Hay un complemento realmente útil para Grunt llamado UnCSS. Se eliminará automáticamente el CSS no utilizado sobre la marcha. Mira este enlace para más información:

Eliminar CSS sin usar automáticamente con Grunt

Answer 4

Instale el complemento de velocidad de páginas de Google para Firebug:

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

Luego, en Firebug, abra la pestaña ''velocidad de página'' y, con ''rendimiento'' seleccionado, haga clic en ''analizar rendimiento''.

Si tiene reglas de estilo no utilizadas en la página actual, junto con muchas otras sugerencias útiles, verá un elemento de la lista con la etiqueta "Eliminar Css no utilizado". Haga clic para expandirlo y ver un desglose por recurso de las reglas CSS no utilizadas que aparecen en la página actual, junto con el tamaño de la memoria que guardará al eliminar las reglas no utilizadas.

Esta es solo una pequeña característica del conjunto de herramientas de velocidad de página, con el que definitivamente se familiarizará si está interesado en el rendimiento de su página en el lado del cliente.

También puede estar interesado en yslow, una herramienta similar para firebug desarrollada por yahoo.

Answer 5

CSS Usage es un gran complemento de Firefox. Puede navegar por varias páginas y verá qué reglas no se han utilizado en ninguna de ellas, por lo que es más preciso que una herramienta que escanea una sola página.

Answer 6

npm install uncss -g

Entonces

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

Answer 7

Puedes probar el complemento Firefox Dust-Me Selectors .