Wie kann ich erkennen und beseitigen Sie nicht verwendete CSS-Stile aus meinem aufgeblähten stylesheet?

StackOverflow https://stackoverflow.com/questions/3574136

  •  01-10-2019
  •  | 
  •  

Frage

Ich habe eine legacy-stylesheet, das ist jetzt voll von nicht verwendeten Formate.Das problem der Ermittlung der erforderlichen von den unnötigen.Gibt es irgendwelche Werkzeuge, um zu helfen mit diesem?

War es hilfreich?

Lösung

CSS -Verwendung ist ein großartiges Firefox-Add-In. Sie können mehrere Seiten durchsuchen und es wird herausfinden, welche Regeln auf keinem von ihnen verwendet wurden - daher ist es genauer als ein Tool, das eine einzelne Seite scannt.

Andere Tipps

Sie könnten das Firefox ausprobieren Dust-Me Selektoren hinzufügen Auf.

Installieren Sie Google pagespeed-plugin für firebug:

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

Dann in Firebug, öffnen Sie die "pagespeed" und, mit "Leistung" ausgewählt ist, klicken Sie auf "analyze performance".

Wenn Sie nicht verwendete style-Regeln auf dieser Seite, dann zusammen mit vielen anderen nützlichen Anregungen, sehen Sie eine Liste Element mit der Bezeichnung "Entfernen Unbenutzte Css".Klicken Sie, um es zu erweitern und sehen Sie eine Aufschlüsselung nach Ressource unbenutzte css-Regeln, die auf der aktuellen Seite, zusammen mit der Größe des Speichers, die Sie speichern, durch entfernen der ungenutzte Regeln.

Dies ist nur ein kleines feature der pagespeed-toolkit, das Sie auf jeden Fall machen Sie sich mit, wenn Sie an alle interessierten in Ihre Seite ein Leistung auf der client-Seite.

Sie könnten auch interessiert sein an yslow, ein ähnliches tool für firebug, entwickelt von yahoo.

Dies Tool aufgerufen, "CSSCSS" entfernt identifiziert doppelte Stile:

Eine der besten Strategien für mich, um CSS aufrechtzuerhalten, besteht darin, die Duplikation so weit wie möglich zu reduzieren. Es ist keine silberne Kugel, aber es hilft sicher.

Dazu müssen Sie alle Regeln in Ihrem Kopf zu jeder Zeit haben. Das ist schwer, CSSCSS ist einfach. Lassen Sie es Ihnen sagen, was überflüssig ist.

Es gibt ein sehr praktisches Plugin für Grunzen namens UNCSS. Es wird automatisch unbenutzte CSS im laufenden Fliegen entfernt. Weitere Informationen finden Sie in diesem Link:

Entfernen Sie ungenutzte CSS automatisch mit Grunzen

Entfernen Sie ungenutzte CSS automatisch mit Grunzen

Grunnfile.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

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top