22

おそらく、経験豊富な Web 開発者なら誰でもこの問題に精通しているでしょう: css ファイルは、使用されなくなったすべてのセレクターが原因で、時間の経過とともに非常に巨大で見苦しくなります。私は Rails プロジェクトに取り組んでおり、非常に頻繁に再設計する傾向があり、膨大な量の CSS が必要になります。それを見つけて削除する最良の方法は何ですか?

今、私はその目的のために特別に構築されたデッドウェイトと呼ばれるレールプラグインがあることを知っています. ただし、これがデッドウェイトに関する私の問題です。まず第一に、javascript で使用されるセレクターを完全に無視します。次に、スキャンするように設定したページのみをスキャンします。つまり、何らかの理由でスキャンしなかったページで使用されているものを削除するリスクがあります。最後に、未使用のセレクターはコンパイルされた css でのみ検出されます (LESS を使用します)。これらを実際のコードと照合するのは少し複雑です。

私もhttp://unused-css.com/を試してみました - それらは素晴らしいですが、ローカルホストにアクセスできず、コンパイルされた CSS しかスキャンできません。

これを行うにはもっと良い方法が必要だと本当に思います。実際、少し前に、プロジェクト ディレクトリ全体の各セレクターを grep して特定の css ファイルを最適化することにしました (emacs + rinari モードにより、非常に簡単かつ非常に高速になります)。結果では、スタイルを削除しました。問題なく、魅力的に機能しました。明らかに、サイト全体でそれを行うつもりはありません。ただし、これが自動化できないとは本当に思いません。さて、私が Python を起動してこれをコーディングする前に、私が車輪を再発明するかどうかを実際に教えてもらえますか?

4

2 に答える 2

13

Opera Software のuCSS ライブラリをチェックしてください。

未使用の CSS や重複する CSS を見つけるのに役立ちます。また、各ルールがマークアップで使用された回数の概要を取得できます。設定ファイルを設定することで、いくつかのオプションを利用できます。

アップデート:

別の優れた代替手段: csscss

Ruby で記述され、SASS、Less をサポートします。

アップデート:

別の優れた代替手段: uncss

複数のファイルで機能し、Javascript が挿入された CSS をサポートします。

于 2012-08-10T17:33:29.187 に答える
2

Dust Me Selectersおよび/またはCSS の使用法Firefox の拡張機能は、未使用の CSS を取り除くのに役立ちます。

Chrome の開発者ツールでは、Web ページ パフォーマンス ツールを使用して、未使用の CSS ルールを見つけることができます。

于 2012-05-24T18:36:44.203 に答える