CSS @importベストプラクティス

Question

@ importを処理したり、それらを一緒に避けたりする最良の方法は何かについて意見を求めています。

DNNで作業していますが、スキンニング中に、モジュールなどのすべての優先エレメントのCSSが非常に乱雑になることがあります。 CSSをすべて1つのファイルにダンプするのは大変な作業ですが、これを分離してskin.cssの上部にインポートする方が良いかどうかは疑問です。効率性の問題もありますが、これが良いトレードオフであるかどうかは疑問です。

私はCSSプロではありませんが、私はこの回答を知っていると思いますが、とにかく尋ねます。とにかく.csファイルと同じ方法でさまざまなCSSファイルを参照することはできますか？ skin.Events.someElement？それはいいとは思いませんか？ ;-)

ありがとうございました。純粋経験から

Answer 1

：

あなたはそれが難しい1つのファイルで作業して見つけた場合、あなたはすべて分離（reset.css、forms.css、あるmain.cssなど）を維持することができます作業中 - Iドン」

生産中 - すべてをに入れてくださいファイル - インポートなし - 1サーバーリクエスト - あなたのCSSを最小限に抑えてください。

あなたのmain.cssのハックを自由にしたい/またはパスの検証をしたい場合、例外はie.cssです（私のクライアントのひとりが検証に気をつけているわけではないので、バッジは動向ではありません:) - 私はちょうど私のmain.css（＃、_、など）をハックするだけです。

Answer 2

@importを避けるのが最善です。

Steve Soudersによると、他のスタイルシートに@importとlinkを埋め込んだり、@importを埋め込むと、パラレルではなく並行したダウンロードが発生します。

他にも問題があります。

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Yahooはまた、IEの@importで

が ページの下部に使用するのと同じ動作をしますので、それはそれを使用しないことをお勧めだことを指摘し、@importに対して推奨しています。

http://developer.yahoo.com/performance/rules.html#csslink

私は通常、1つのスタイルシートを使用し、それをつかむためにlinkを使用しています。

非常に大きいサイトでは、1つのメインスタイルシートを使用し、追加のスタイリングが必要なセクションには小さなシートを使用し、必要に応じてこれらのスタイルシートをさまざまなページに追加します。