Ich habe ein Legacy-Stylesheet, das jetzt voll mit nicht verwendeten Stilen ist. Das Problem besteht darin, das Notwendige aus dem Unnötigen zu identifizieren. Gibt es irgendwelche Werkzeuge, um dabei zu helfen?Wie kann ich nicht verwendete CSS-Stile aus meinem aufgeblähten Stylesheet identifizieren und entfernen?
CSS Usage ist ein großartiges Add-In für Firefox. Sie können mehrere Seiten durchsuchen und herausfinden, welche Regeln in keinem von ihnen verwendet wurden - daher ist es genauer als ein Werkzeug, das eine einzelne Seite scannt.
Sie könnten das Firefox Dust-Me Selectors Add-on versuchen.
installieren Googles Page Speed-Plugin für Firebug:
http://code.google.com/speed/page-speed/
Dann in Firebug, öffnen Sie das 'Page Speed' Tab und mit 'Leistung' ausgewählt, klicken Sie auf 'Leistung analysieren.'
Wenn Sie auf der vorliegenden Seite nicht verwendete Stilregeln haben, sehen Sie zusammen mit vielen anderen nützlichen Vorschlägen einen Listeneintrag mit der Bezeichnung "Remove Unused Css". Klicken Sie, um sie zu erweitern und eine Aufschlüsselung nach Ressource von unbenutzten CSS-Regeln zu sehen, die auf der vorliegenden Seite erscheinen, zusammen mit der Speichergröße, die Sie speichern, indem Sie die nicht verwendeten Regeln entfernen.
Dies ist nur ein kleines Feature des Pagespeed-Toolkits, mit dem Sie sich auf jeden Fall vertraut machen, wenn Sie auf der Client-Seite an Ihrer Seitenleistung interessiert sind.
Sie könnten auch interessiert sein an yslow, ein ähnliches Tool für firebug von yahoo entwickelt.
Diese tool called „csscss“ entfernt identifiziert dupliziert Stile:
Eine der besten Strategien für mich CSS zu halten ist Duplizierung so weit wie möglich zu reduzieren. Es ist keine Wunderwaffe, aber es hilft sicher .
Um dies zu tun, müssen Sie alle Regelsätze in Ihrem Kopf haben alle mal. Das ist schwer, CSS ist einfach. Lass es dir sagen, was überflüssig ist.
Es gibt ein wirklich nützliches Plugin für Grunt namens UnCSS. Es entfernt automatisch unbenutzte CSS im laufenden Betrieb. Schauen Sie sich diesen Link für weitere Informationen:
entfernen automatisch Nicht verwendete CSS 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
Dann
uncss http://example.com/ > out.css
mögliches Duplikat von [Tool zum Identifizieren unbenutzter css-Definitionen] (http://stackoverflow.com/questions/135657/tool-to-identify-unused-css-definitions) – js1568
mögliches Duplikat von [Wie kann ich unbenutzte finden? Bilder und CSS-Stile in einer Website?] (http: // stackoverflow.com/questions/33242/how-can-i-find-unused-images-und-css-styles-in-a-website) –