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

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

  •  01-10-2019
  •  | 
  •  

質問

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

役に立ちましたか？

解決

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

他のヒント

Firefoxを試すことができます Dust-Meセレクター アドオン。

GoogleのPagesSpeedプラグインをFireBugにインストールします。

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

次に、FireBugで「PagesSpeed」タブを開き、「パフォーマンス」を選択して、「パフォーマンスを分析する」をクリックします。

現在のページに未使用のスタイルのルールがある場合は、他の多くの有用な提案とともに、「未使用のCSSを削除」というラベルの付いたリスト項目が表示されます。クリックして展開し、未使用のルールを削除することで保存するメモリサイズとともに、本ページに表示される未使用のCSSルールのリソースによる内訳を確認します。

これは、PagesSpeed Toolkitの小さな機能の1つにすぎません。クライアント側のページパフォーマンスに興味がある場合は、間違いなく自分自身に慣れています。

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

これ 呼ばれるツール, 、「csscss」は、識別された識別スタイルを削除します。

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

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

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

グラントを使用して、未使用のCSSを自動的に削除します

グラントを使用して、未使用の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']);

};

npm install uncss -g

それで

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top