CSSを含める最善の方法は？@importを使用する理由

基本的に私は@importスタイルシートを既存のスタイルシートにインポートするために使用することの利点/目的は単に別のものを追加することよりも不思議に思っています...

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

文書の頭に？

ページスピードの観点からは、@importスタイルシートが同時にダウンロードされるのを防ぐことができるため、CSSファイルはほとんど使用しないでください。たとえば、スタイルシートAにテキストが含まれている場合：

@import url("stylesheetB.css");

その後、最初のスタイルシートがダウンロードされるまで、2番目のスタイルシートのダウンロードが開始されない場合があります。一方、両方のスタイルシートが<link>メインHTMLページの要素で参照されている場合は、両方を同時にダウンロードできます。両方のスタイルシートが常に一緒にロードされる場合は、それらを単一のファイルに単純に結合することも役立ちます。

@import適切な状況が時々ありますが、それらは一般的に例外であり、ルールではありません。

私は悪魔の支持者を演じるつもりです、なぜなら人々があまりに同意するとき私はそれが嫌いだからです。

1.別のスタイルシートに依存するスタイルシートが必要な場合は、@ importを使用します。別のステップで最適化を行います。

常に最適化している変数は2つあります。コードのパフォーマンスと開発者のパフォーマンスです。大多数ではないにせよ、多くの場合、開発者をより効率的にして、コードをより高性能にすることがより重要です。

あるスタイルシートが別のスタイルシートに依存している場合、最も論理的なことは、それらを2つの別々のファイルに入れ、@ importを使用することです。これは、コードを見る次の人にとって最も論理的な意味を持ちます。

（そのような依存関係が発生するのはいつですか？私の意見では、それはかなりまれです-通常は1つのスタイルシートで十分です。ただし、異なるCSSファイルに物事を配置する論理的な場所がいくつかあります。）

• テーマ：同じページに異なる配色またはテーマがある場合、それらはすべてではなく一部のコンポーネントを共有する場合があります。
• サブコンポーネント：不自然な例-メニューを含むレストランページがあるとします。メニューがページの他の部分と大きく異なる場合、それが独自のファイルにあると、メンテナンスが容易になります。

通常、スタイルシートは独立しているため、を使用してすべてを含めるのが妥当<link href>です。ただし、それらが依存階層である場合は、最も論理的に意味のあることを行う必要があります。

Pythonはインポートを使用します。Cには次のものが含まれます。JavaScriptは必要としています。CSSにはインポートがあります。必要なときに使用してください！

2.サイトをスケーリングする必要があるポイントに達したら、すべてのCSSを連結します。

リンクや@importsを経由するかどうかにかかわらず、あらゆる種類のCSSリクエストは、高パフォーマンスのWebサイトでは悪い習慣です。最適化が重要なポイントになると、すべてのCSSが縮小版を通過するはずです。Cssminはインポートステートメントを結合します。@Brandonが指摘するように、gruntにはそのための複数のオプションがあります。（この質問も参照してください）。

縮小段階になっ<link>たら、人々が指摘しているように高速です。そのため、多くてもいくつかのスタイルシートにリンクし、可能な場合は@importしないでください。

ただし、サイトが実稼働規模に達する前に、コードが少し速くなるよりも、コードが整理され、論理的であることが重要です。

@import速度上の理由から、ページにCSSを含めないでください。なぜそうでないのかを学ぶには、この優れた記事を参照してください：http : //www.stevesouders.com/blog/2009/04/09/dont-use-import/

また、minifyスクリプトは他のcssファイルから@import行を「取り除く」ことができないため、@ importタグを介して提供されるcssファイルを縮小して結合することはしばしば困難です。これらを<linkタグとして含めると、既存のminify php / dotnet / javaモジュールを使用して縮小できます。

だから：の<link />代わりに使用してください@import。

linkメソッドを使用すると、スタイルシートは並列にロードされ（より速く、より良く）、ほぼすべてのブラウザーがリンクをサポートします。

importは余分なcssファイルを1つずつ（遅い）ロードし、スタイルのないコンテンツのFlashを提供します

@Nebo IznadMišoGrgur

@importを使用する正しい方法はすべて次のとおりです

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

ソース：https : //developer.mozilla.org/en-US/docs/Web/CSS/@import

インポート機能を使用する場合とヘッドにcssスタイルシートを追加する場合では、それほど大きな違いはありません。を使用@importすると、簡単に拡張できるように、スタイルシートを連鎖させるのに一般的に使用されます。たとえば、いくつかの一般的なcss定義と組み合わせて、さまざまなカラーレイアウトを簡単に交換するために使用できます。主な利点/目的は拡張性です。

xbonezのコメントにも同意します。移植性と保守性が追加の利点です。

それらは非常に似ています。@importの方が保守しやすいと主張する人もいます。ただし、@ importごとに、「リンク」メソッドを使用する場合と同じ方法で新しいHTTPリクエストが発生します。したがって、速度のコンテキストでは、それは速くありません。そして、「ダスクワフ」が言ったように、それは同時にロードされないので、これは落とし穴です。

@importを使用する1つの場所は、英語とフランス語の2つのバージョンのページを実行している場合です。main.cssを使用して、英語でページを作成します。フランス語版を作成するとき、フランス語のスタイルシート（main_fr.css）にリンクします。フランス語のスタイルシートの一番上で、main.cssをインポートしてから、フランス語版で異なる必要なパーツだけに特定のルールを再定義します。

http://webdesign.about.com/od/beginningcss/f/css_import_link.htmから引用

@importメソッドの主な目的は、ページで複数のスタイルシートを使用することですが、<ヘッド>には1つのリンクのみを使用します。たとえば、企業では、サイトのすべてのページにグローバルスタイルシートがあり、サブセクションにはそのサブセクションにのみ適用される追加のスタイルがあります。サブセクションスタイルシートにリンクし、そのスタイルシートの上部にあるグローバルスタイルをインポートすることで、サイトとすべてのサブセクションのすべてのスタイルを含む巨大なスタイルシートを維持する必要がなくなります。唯一の要件は、@ importルールがスタイルルールの残りの前に来る必要があることです。また、継承は依然として問題になる可能性があることを覚えておいてください。

場合によっては、インラインではなく@importを使用する必要があります。32以上のcssファイルを含む複雑なアプリケーションで作業していて、IE9をサポートする必要がある場合、選択肢はありません。IE9は、最初の31以降のcssファイルを無視します。これには、cssが含まれてインライン化されます。ただし、各シートは他の31をインポートできます。

@importを使用する理由はたくさんあります。

@importを使用する強力な理由の1つは、ブラウザ間の設計を行うことです。一般的に、インポートされたシートは多くの古いブラウザーから隠されています。これにより、Netscape 4以前のシリーズ、Mac用のInternet Explorer 5.2、Opera 6以前、およびPC用のIE 3および4などの非常に古いブラウザーに特定のフォーマットを適用できます。

これを行うには、base.cssファイルで次のようにします。

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

インポートしたカスタムシート（newerbrowsers.css）で、新しいカスケードスタイルを適用します。

html body {
  font-size:1em;
}

「em」ユニットを使用すると、「px」ユニットよりも優れています。これは、ユーザー設定に基づいてフォントとデザインの両方を拡大できるためです。一方、古いブラウザは、ピクセルベース（固定されていて、ブラウザのユーザー設定で変更できない）でより優れています。 。インポートされたシートは、ほとんどの古いブラウザでは表示されません。

あなたはそうかもしれない、誰が気にする！より古い時代遅れの政府や企業のシステムに行ってみても、古いブラウザが使用されていることがわかります。しかし、今日あなたが愛するブラウザもいつか時代遅れになり、時代遅れになるので、その本当に良いデザインです。また、CSSを制限された方法で使用することは、サイトでうまく機能しないユーザーエージェントのグループがさらに大きくなり、成長していることを意味します。

@importを使用すると、ブラウザ間のWebサイトの互換性が99.9％の飽和に達するだけです。これは、多くの古いブラウザがインポートされたシートを読み取れないためです。それはあなたがそれらのhtmlに基本的なシンプルなフォントセットを適用することを保証しますが、より高度なCSSは新しいエージェントによって使用されます。これにより、新しいデスクトップブラウザーに必要なリッチなビジュアルディスプレイを犠牲にすることなく、古いエージェントがコンテンツにアクセスできるようになります。

最近のブラウザーは、Webサイトへの最初の呼び出しの後、HTML構造とCSSを非常によくキャッシュすることを覚えておいてください。サーバーへの複数の呼び出しは、かつてのボトルネックではありません。

スマートデバイスにアップロードされた数メガバイトおよび数メガバイトのJavaScript APIとJSON、およびページ間で一貫性のない不適切に設計されたHTMLマークアップが、今日の遅いレンダリングの主な原因です。平均的なGoogleニュースページは、ほんの少しのテキストを表示するためだけに、6メガバイトを超えるECMAScriptです。笑

数キロバイトのキャッシュされたCSSと小さなJavaScriptフットプリントを備えた一貫性のあるクリーンなHTMLは、JavaScriptサーカストリックを介して操作と変更を選択しない限り、ブラウザーが一貫性のあるDOMマークアップとCSSの両方をキャッシュするため、ユーザーエージェントで驚くほど高速にレンダリングされます。

これの鍵は、実際に複数のCSSスタイルシートを作成する2つの理由だと思います。

1. Webサイトのページごとに異なるCSS定義が必要なため、複数のシートを作成します。または、少なくともそれらすべてが、他の1つのページに必要なすべてのCSS定義を必要とするわけではありません。したがって、CSSファイルを分割して、さまざまなページに読み込まれるシートを最適化し、あまり多くのCSS定義を読み込まないようにします。
2. 2つ目の理由は、CSSのサイズが大きくなり、扱いにくくなり、大きなCSSファイルを維持しやすくするために、複数のCSSファイルに分割することです。

最初の理由により、追加の<link>タグが適用されます。これにより、異なるページに異なるCSSファイルのセットをロードできます。

2つ目の理由は、@import複数のCSSファイルを取得しますが、読み込まれるファイルは常に同じであるため、ステートメントは最も便利なように見えます。

ロード時間の観点からは違いはありません。ブラウザは、どのように実装されていても、分離されたCSSファイルをチェックしてダウンロードする必要があります。

Eric MeyerのReset CSS v2.0のようにCSS RESETを使用している場合は、CSSで@importを使用してください。これにより、CSSを適用する前にそれを実行して、競合を防ぐことができます。

@importは、複数のデバイス用のコードを書くときに最も便利だと思います。問題のデバイスのスタイルのみを含めるように条件ステートメントを含め、1つのシートのみが読み込まれます。引き続きリンクタグを使用して、一般的なスタイル要素を追加できます。

追加できるリンクされたスタイルシートの「高いピーク」を体験しました。リンクされたJavascriptをいくつ追加しても、私の無料のホストプロバイダーにとって問題ではありませんでしたが、外部スタイルシートの数を2倍にした後、クラッシュ/スローダウンしました。正しいコード例は次のとおりです。

@import 'stylesheetB.css';

したがって、デザインをハードコーディングしているときに、Nitramが述べたように、良いメンタルマップを作成するのに役立ちます。ゴッドスピード。そして、もしあれば、私は英語の文法の間違いを許します。

@importを使用する理由はほとんどありません。インポートしたすべてのCSSファイルを個別にロードし、サイトの速度を大幅に低下させる可能性があるためです。CSSの最適な処理方法（ページ速度に関して）に興味がある場合は、次の方法ですべてのCSSコードを処理する必要があります。

• すべてのCSSファイルを開き、すべてのファイルのコードをコピーします
• ページのHTMLヘッダーの単一のSTYLEタグの間にすべてのコードを貼り付けます
• 大量のコードがある場合、または特に必要がある場合を除き、CSS @importまたは個別のCSSファイルを使用してCSSを配信しないでください。

詳細はこちら：http : //www.giftofspeed.com/optimize-css-delivery/

上記が最適に機能する理由は、ブラウザーが処理する要求が少なくなり、個別のファイルをダウンロードする代わりにCSSのレンダリングをすぐに開始できるためです。

これは、PHP開発者を助けるかもしれません。以下の関数は、空白を取り除き、コメントを削除し、すべてのCSSファイルを連結します。次に<style>、ページをロードする前に、それをヘッドのタグに挿入します。

以下の関数はコメントを取り除き、渡されたcssを縮小します。次の機能と組み合わせて使用​​します。

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

この関数は、ドキュメントの先頭で呼び出します。

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

concatenateCSS()ドキュメントヘッドに関数を含めます。パスIE：を含むスタイルシートの名前を含む配列を渡しますcss/styles.css。.css上記の関数で自動的に追加されるため、拡張子を追加する必要はありません。

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>