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?¿Cómo identifico y elimino estilos CSS no utilizados de mi hoja de estilos inflada?
CSS Usage es un gran complemento de Firefox en. 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.
Usted puede probar con el Firefox Dust-Me Selectors complemento.
instalar el plugin de Google Page Speed para Firebug:
http://code.google.com/speed/page-speed/
Luego, en Firebug, abra la pestaña 'Page Speed' y, con el 'rendimiento' seleccionado, haga clic en 'analizar el rendimiento'.
Si 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 sin usar CSS". 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.
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.
Usted también podría estar interesado en YSlow, una herramienta similar para Firebug desarrollado por Yahoo.
Este tool called, "csscss" elimina identifica duplicados 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 ello, es necesario tener todos los conjuntos de reglas en la cabeza de todos los tiempos . Eso es difícil, csscss es fácil. Deja que te diga lo que es redundante.
Hay un complemento muy útil para Grunt llamado UnCSS. Se eliminará automáticamente el CSS no utilizado sobre la marcha. Echa un vistazo a este enlace para más información:
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']);
};
npm install uncss -g
Entonces
uncss http://example.com/ > out.css
posible duplicado de [Herramienta para identificar las definiciones CSS sin usar] (http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions) – js1568
posible duplicado de [Cómo puedo encontrar sin usar imágenes y estilos CSS en un sitio web?] (http: // stackoverflow.com/questions/33242/how-can-i-find-unused-images-and-css-styles-in-a-web) –