312

基本的に、@importスタイルシートを既存のスタイルシートにインポートすることと、別のスタイルシートを追加することの利点/目的は何なのか疑問に思っています...

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

ドキュメントの先頭に？

4

18 に答える 18

355

ページ速度の観点からは@import、スタイルシートが同時にダウンロードされるのを妨げる可能性があるため、CSS ファイルはほとんど使用しないでください。たとえば、スタイルシート A に次のテキストが含まれている場合:

@import url("stylesheetB.css");

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

場合によっては適切な状況もあり@importますが、通常は例外であり、規則ではありません。

于 2012-04-05T22:47:12.090 に答える
206

(2022 年更新: 現在、多くのプロの開発者が SASS のようなシステム、または React と互換性のあるフレームワークで CSS を管理しており、これらのいずれかがこれらの最適化を内部で処理することに注意してください。)

人々が同意しすぎるのは嫌なので、私は悪魔の擁護者を演じるつもりです。

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

コードのパフォーマンスと開発者のパフォーマンスという 2 つの変数をいつでも最適化できます。多くの場合、多くの場合、開発者の効率を高め、コードのパフォーマンスを向上させることがより重要です。

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

（そのような依存関係はいつ発生しますか？私の意見では、それはかなりまれです

  • 通常は 1 つのスタイルシートで十分です。ただし、さまざまな CSS ファイルに配置する論理的な場所がいくつかあります:)

  • テーマ: 同じページに異なる配色またはテーマがある場合、すべてのコンポーネントではなく一部のコンポーネントが共有される場合があります。

  • サブコンポーネント: 不自然な例 - メニューを含むレストランのページがあるとします。メニューがページの残りの部分と大きく異なる場合は、それが独自のファイルにあると保守が容易になります。

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

Python はインポートを使用します。C の用途には次のものがあります。JavaScript には必須があります。CSS にはインポートがあります。必要なときは使ってね！

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

あらゆる種類の複数の CSS リクエスト (リンクまたは @import を介して)は、高パフォーマンスの Web サイトにとっては悪い習慣です。最適化が重要なポイントに達したら、すべての CSS がミニファイアーを通過する必要があります。Cssminは import ステートメントを結合します。@Brandon が指摘しているように、grunt にも同様に複数のオプションがあります。（この質問も参照してください）。

人々が指摘しているように、最小化された段階になると、<link>より高速になるため、せいぜいいくつかのスタイルシートにリンクし、可能であれば @import しないでください。

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

于 2014-04-19T21:28:22.347 に答える
14

@import速度上の理由から、ページに CSS を含めるために使用しないことをお勧めします。なぜそうしないのかについては、この優れた記事を参照してください。

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

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

于 2012-04-05T22:50:50.967 に答える
13

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

import は、追加の css ファイルを 1 つずつ (遅く) ロードし、スタイル設定されていないコンテンツの Flash を生成する可能性があります

于 2012-04-05T22:51:11.367 に答える
10

@Nebo Iznad Mišo Grgur

以下は @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

于 2013-10-31T14:12:42.643 に答える
7

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

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

于 2012-04-05T22:45:34.973 に答える
3

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

于 2012-04-05T22:54:07.843 に答える
2

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

于 2013-12-17T17:34:15.043 に答える
2

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

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

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

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

ロード時間の観点からは、違いはありません。ブラウザーは、実装方法に関係なく、分離された CSS ファイルを確認してダウンロードする必要があります。

于 2012-04-05T22:47:03.370 に答える
0

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

@import 'stylesheetB.css';

したがって、Nitram が述べたように、設計をハードコーディングしながら、優れたメンタル マップを作成するのに役立ちます。ゴッドスピード。また、英語の文法上の誤りがあればご容赦ください。

于 2013-09-10T22:46:47.970 に答える
0

最新のブラウザーでは、css ファイルを使用してグローバル変数を定義できます。このファイルは、変数を使用できる他の css ファイルにインポートできます。

たとえば、サイト全体で一貫した色を使用するには:

  1. 色.css

    :root {
   --bg-dark: #ffffff;
}

  2. ホーム.css

    @import "colors.css";

body: var(--bg-dark)
于 2021-05-05T08:52:18.680 に答える
-2

@import を使用すると、インポートされたすべての CSS ファイルが個別に読み込まれ、サイトが大幅に遅くなる可能性があるため、使用する理由はほとんどありません。CSS を処理する最適な方法 (ページ速度に関して) に関心がある場合は、すべての CSS コードを処理する方法を次に示します。

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

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

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

于 2014-11-12T15:37:46.400 に答える
-2

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

以下の関数は、コメントを削除し、渡された 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;
}
?>

ドキュメントの head でこの関数を呼び出します。

<?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>
于 2016-03-29T22:18:58.737 に答える