肥大化したスタイルシートから未使用のCSSスタイルを識別して排除するにはどうすればよいですか?
-
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を自動的に削除します
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