16

既存の Web サイトを維持および改善する必要があり、その CSS スタイルシートで発見した冗長性に溺れています。既存の冗長性と要素の非方法論的な順序付けを考えると、小さな変更がシステム全体にどのように伝播するか、または特定の効果を達成するために変更をどこに適用するかを追跡および予測することは困難です。 CSSファイルと実験。

Firefox 用の最新の Firebug および「Web 開発者」アドオンを使用してきましたが、明らかに十分ではありません。冗長な「オーバーライド」がどこにあるかを教えてくれるツールが必要で、おそらくより良いカスケード スキームを提案してくれるツールが必要です。

言い換えれば、私が現在持っているのとまったく同じ視覚的機能を提供する最短の CSS ファイルを生成するのを手伝ってください.

さらに明確にするために、「#000000」を「#000」に、「0.5em」を「.5em」に、「白」を「#FFF」などに置き換えるツールを探しているわけではありません (これは「文字」の冗長性を考慮していますが、「カスケード ロジック」の冗長性には対応していません)。たとえば、子要素の "font-size: 10px" 属性は既に親から継承されているため冗長であることを教えてくれるツールを探しています。

より高度な機能: クラスまたは ID の「color: #000000」属性は、Web サイトの HTML/PHP ファイルで使用されていないため、冗長です。

この種の「正規化」を自動的に行うツールはありますか?

4

7 に答える 7

2

あなたは CSS の聖杯を探していると思います。存在しないと思います。問題は、ブラウザが何をレンダリングし、スタイルシートに必要なものが正確にわからないことです。Firefox 用の Dust-me Selectorsプラグインを使用して未使用のスタイルを見つけましたが、これを自動的に行うのは大変な作業です。

とはいえ、SASS (既に述べたように) やLESSのようなフレームワークを使用することは、あなたの質問に対する回り道だと思います。フレームワークは多くの冗長性を排除し、CSS をコンパクトにします。CSS との類似性から、私は SASS よりも LESS の方が好きです。

于 2010-08-23T16:30:40.077 に答える
2

マークアップに基づいて重複/未使用/不要な CSS を見つけるには、 WARI、またはDust-Me Selectors ( @Aaron Dが述べたように)、またはCSS Crunchを試すことができます。最後の 2 つはブラウザー拡張機能 (それぞれ Firefox と IE 用) で、1 ページのみを表示しますが、WARI はサイト全体を表示することを目的としています。しかし、WARI を機能させるにはあまり運がありませんでした。

于 2010-08-24T13:40:06.790 に答える
2

Aaron は複雑さについて適切な指摘をしています。たとえば、そのようなツールは、CSS ファイルだけでなく HTML にもアクセスする必要があります (そうしないと、継承などを判断できません)。サイト全体をスパイダーし、すべてのページを考慮に入れるものを探していますか、それともファイルからマークアップを提供できますか?

また、そのようなツールは、まともな Web デザイナーが作成するよりも保守しにくい CSS を作成する可能性があります (セレクターを短くすることを考えていますが、後で「再延長」する必要があるかもしれません)。これが一時的なアクションであれば問題ありませんが、そもそもなぜこれを行う必要があるのか​​ 疑問に思います.

于 2010-08-23T16:34:29.630 に答える
2

SASS をチェックしてください。独自の言語と構文を備えた CSS コンパイラですが、CSS インポート機能があります。 http://sass-lang.com/

インポート/エクスポートのサイクルだけでうまくいくのだろうか?

編集: インポート/エクスポート サイクルだけでは不十分のようですが、SASS はリファクタリング中の作業を容易にする機能を提供します。

于 2010-08-23T16:15:54.317 に答える
1

I'm not aware of such a tool and looking at the complexity of CSS, I'm not even sure it is possible to solve this (some CSS styles are just there to whack older browsers into compliance). So how much value does a tool have that creates a new W3C-compliant CSS which doesn't render on most browsers because of bugs?

That said, you should have a look at Envjs which allows you to read a web page in an emulated browser and then examine the result. Not perfect but might get you started.

于 2010-08-23T15:34:26.070 に答える
0

YUI Compressorを試すことができます。CSS および Javascript ファイルで機能します。

于 2010-08-23T15:29:50.210 に答える
0

You can try out CSS Tidy (online version). It will reduce redundancy, optionally convert to shorthand styles, and can be used to create minified output and pretty/formatted output.

于 2010-08-23T15:33:38.797 に答える