2011-12-29 11 views
2

私はこれが1つのHTTPリクエストまたは3をやるんHTTPリクエストでCSSファイルの@importを使用していますか?

<link rel="stylesheet" type="text/css" href="all.css"> 

し、そのファイルが持っているようなページに含まれているCSSファイルを...

@import "shCore.scss"; 
@import "shThemeDjango.scss"; 

ている場合は?

複数のファイルをインポートしてメインファイルにすべてのファイルをリンクする利点はありますか?

(私は理想的なソリューションがすべてと縮小化を組み合わせることである知っている)

答えて

4

私は@importを使用しないことをお勧めします。これは、最初のCSSファイルを解析する必要があるため、ブラウザがファイルを並行してダウンロードするのを停止します。次に、インポートcssファイルを取り出してインポートします。

google on @import

あなたのCSSが最良の選択肢である組み合わせ、縮小化で述べたように。 minifyのようなツールを使用すると、スタイルシートを分離してきれいに保つことができますが、それらを組み合わせて縮小して提供できます。

+1

それは3つのHTTPリクエストを意味するものです –

+0

私が聞きたかったことは素晴らしいですが、私はそれが良いとは思えなかったので、私はいつもそれらから離れていましたが、本当の理由はありませんでした。私はWordPressのテーマの多くがインポートを行うことに気付きます。ビルドスクリプトで縮小して結合する – JasonDavis

0

これは、依然として3つのHTTPリクエストを意味し、Jrosの言及と同じように、ロード処理をさらに遅くする可能性が最も高くなります。

代わりに、すべてのCSSを1つのファイルに縮小し、可能な限りHTTPリクエストを少なくし、転送する必要があるデータの量を減らすことをお勧めします。

ここには、サーバ側ではしたくない場合に使用できるCSS小型化ツールのexampleがあります。

0

質問の文脈を考えると、誤解を招くようなアドバイスがいくつかありました。確かに、 "バニラ" CSS @importはHTTPリクエストを行います。しかし、OPはプリプロセッサを使用しているようです。

などのプリプロセッサ。 SASSまたはLESSの場合は、コードをコンパイルして、しばしば単数のcssファイルに変換します。意味は@importが既に処理され、あなたのために含まれています。エンドポイントスタイルシートを参照するだけです。

だからいいえ。プリプロセッサを使用するときは、自分をノックアウトしてください。これはコードを整理するのに最適な方法です。

関連する問題