4 CSSを監査し最適化するためのツール

あなたのウェブサイトが成長し始めたら、あなたのコードも成長します. あなたのコードが拡張するにつれて、CSSは突然維持するのが難しくなるかもしれず、そしてあなたはあるCSSルールを他のもので上書きすることになるかもしれません。これは物事を複雑にし、あなたはたぶんたくさんのバグになってしまうでしょう.

これがあなたに起こっているのであれば、それはあなたのための時間です サイトのCSSを監査する. CSSを監査することで、最適化されていないCSSの部分を特定できます。サイトのパフォーマンスを低下させるコード行を削除することで、スタイルシートのファイルサイズを減らすこともできます。.

CSSの監査と最適化に役立つ5つの優れたツールがあります。.

タイプ - オ - マチック

タイプ - オ - マチック Webサイトで使用されているフォントを分析するためのFirebugプラグインです。このプラグインは、フォントファミリー、サイズ、太さ、色、そしてWebページでフォントが使用された回数などのフォントプロパティを含む表形式で視覚的なレポートを表示します。レポートテーブルを使用すると、フォントの使用を最適化したり、不要なものを削除したり、似すぎたスタイルを組み合わせたりすることができます。.

CSSのリント

CSSのリント です リンティング CSSのパフォーマンス、アクセシビリティ、および互換性に対処する特定のパラメータに基づいてCSSの構文を分析するツール。あなたはその結果に驚かされるでしょう、あなたのCSSにはたくさんの警告があることを期待してください。しかしながら、これらのエラーは結局あなたがCSSシンタックスを修正し、そしてそれをより効率的にするのを助けるでしょう。さらに、あなたはまた、より良いCSS作家になるでしょう.

CSS ColorGuard

CSS ColorGuard 比較的新しいツールです。これはNodeモジュールとして構築されており、Windows、OS X、およびLinuxのすべてのプラットフォームで動作します。 CSS ColorGuardは、スタイルシートで同じ色を使用しているかどうかを通知するコマンドラインツールです。例えば. ＃f3f3f3 かなり近い ＃f4f4f4, そのため、この2つをマージすることを検討したいと思うかもしれません。 CSS ColorGuardは設定可能です。類似性のしきい値を設定したり、ツールに無視させたい色を設定したりできます。.

CSS Dig

CSS Dig Pythonスクリプトであり、あなたのコンピュータ上でローカルに動作します。 CSS DigはあなたのCSSを徹底的に調べます。それはプロパティを読んで組み合わせます。背景色の宣言はすべて背景セクションの下に入ります。こうすることで、CSSの構文を標準化しようとするときに、レポートに基づいて簡単に決定を下すことができます。あなたは、次の色宣言でスタイルを渡って色を見つけるかもしれません.

 色：#ccc;色：#cccccc;色：#CCC;色：#CCCCCC; 

これらの色宣言は同じことをします。あなたは同様に行くかもしれません #ccc または首都と #CCC 標準として。 CSS Digはこの冗長性を他のCSSプロパティにも公開することができ、あなたはあなたのコードをより一貫性のあるものにすることができるでしょう。.