単一の巨大な .css ファイルと複数の小さな特定の .css ファイルの違いは何ですか? [closed] 質問する

単一の巨大な .css ファイルと複数の小さな特定の .css ファイルの違いは何ですか? [closed] 質問する

ほぼすべてのページで使用されるスタイル要素を含む単一の巨大な .css ファイルを持つことに利点はありますか?

管理を容易にするために、さまざまな種類の CSS をいくつかのファイルに抽出し、すべてのファイルをメインに含めたいと考えていますが、<link />これは悪いことでしょうか?

こっちのほうがいいと思う

  1. 位置.css
  2. ボタン.css
  3. テーブル.css
  4. コピー.css

  1. サイト.css

どちらか一方の方法ともう一方の方法とで、何か問題が起きたことはありますか?

ベストアンサー1

これは答えるのが難しい質問です。私の意見では、どちらの選択肢にも長所と短所があります。

個人的には、巨大な CSS ファイルを 1 つ読むのは好きではありませんし、維持するのも非常に困難です。一方、ファイルを分割すると余分な http リクエストが発生し、速度が低下する可能性があります。

私の意見は2つのうちの1つです。

1) CSS を一度構築したら絶対に変更しないことがわかっている場合は、開発段階で複数の CSS ファイルを構築し (読みやすさのため)、公開前に手動で結合します (http リクエストを減らすため)。

2) CSS をときどき変更し、読みやすい状態にしておく必要があることがわかっている場合は、別々のファイルを作成し、コードを使用して (何らかのプログラミング言語を使用している場合)、 実行時 のビルド時にそれらを結合します (実行時の縮小/結合はリソースを大量に消費します)。

どちらのオプションでも、HTTP リクエストをさらに削減するために、クライアント側でキャッシュすることを強くお勧めします。

編集:
これを見つけた ブログ コードのみを使用して実行時に CSS を組み合わせる方法を示しています。一見の価値があります (ただし、まだ自分でテストしていません)。

編集 2:
デザイン時に個別のファイルを使用し、ビルド プロセスで縮小および結合することにしました。この方法では、開発中に個別の (管理可能な) CSS を保持し、実行時に適切なモノリシックな縮小ファイルを保持できます。また、実行時に圧縮/縮小を行わないため、静的ファイルは保持され、システムのオーバーヘッドも少なくなります。

注: 買い物をする方には、バンドラービルド プロセスの一部として。IDE 内からビルドする場合でも、ビルド スクリプトからビルドする場合でも、Bundler は Windows 上で付属の を介して実行することexeも、すでに node.js を実行している任意のマシン上で実行することもできます。

おすすめ記事