web-dev-qa-db-ja.com

肥大化したスタイルシートから未使用のCSSスタイルを識別して削除するにはどうすればよいですか？

未使用のスタイルでいっぱいになったレガシースタイルシートがあります。問題は、不要なものから必要なものを特定することです。これを支援するツールはありますか？

cssstylesheetdefunct
34
Cornish

CSSの使用法 は素晴らしいFirefoxアドインです。複数のページを閲覧することができ、どのルールがそれらのいずれにも使用されていないかがわかります。したがって、単一のページをスキャンするツールよりも正確です。

26
Fenton

Firefox Dust-Me Selectors アドオンを試すことができます。

3
Mike

Firebug用のGoogleのpagespeedプラグインをインストールします。

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

次に、Firebugで、[pagespeed]タブを開き、[performance]を選択した状態で、[analyzeperformance]をクリックします。

現在のページに未使用のスタイルルールがある場合は、他の多くの有用な提案とともに、「未使用のCssを削除」というラベルの付いたリストアイテムが表示されます。クリックして展開すると、現在のページに表示される未使用のcssルールのリソース別の内訳と、未使用のルールを削除することで節約できるメモリサイズが表示されます。

これは、pagespeedツールキットのほんの小さな機能の1つであり、クライアント側でのページのパフォーマンスにまったく関心がある場合は、間違いなく慣れ親しんでいます。

Yahooが開発したfirebug用の同様のツールであるyslowにも興味があるかもしれません。

2
alegscogs

UnCSSと呼ばれるGrunt用の本当に便利なプラグインがあります。未使用のCSSをその場で自動的に削除します。詳細については、このリンクを確認してください。

Gruntを使用して未使用のCSSを自動的に削除します

1
Deano

この ツールと呼ばれる 、 "csscss"は、重複したスタイルを識別します。

CSSを維持するための最善の戦略の1つは、重複を可能な限り減らすことです。特効薬ではありませんが、確かに役立ちます。

そのためには、常にすべてのルールセットを頭に入れておく必要があります。それは難しいです、csscssは簡単です。何が冗長であるかを教えてください。

1
chrisjlee

npm install uncss -g

次に

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

0
Jonathan

Gruntを使用して未使用のCSSを自動的に削除します

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']);

};
0
Pranay Soni