動的（サーバー側で生成された）CSSを使用しないのはなぜですか？

サーバー側で生成されるHTMLは簡単であるため（AJAXよりも前に動的なWebページを作成する唯一の方法でした）、サーバー側で生成されるCSSはそうではありません。実際、私はそれを見たことがない。CSSコンパイラはありますが、静的として使用できるCSSファイルを生成します。

技術的には、特別なライブラリは不要です。HTML スタイルタグは、静的CSSファイルの代わりにPHP（/ ASP / whatever）テンプレートスクリプトを参照し、スクリプトはCSS コンテンツタイプヘッダーを送信する必要があります-それだけです。

キャッシュに問題がありますか？そうは思いません。スクリプトは、no-cacheなどのヘッダーを送信する必要があります。デザイナーにとって問題ですか？いいえ、CSSテンプレートを編集する必要があります（HTMLテンプレートを編集するため）。

なぜ動的CSSジェネレーターを使用しないのですか？または、もしあれば、私に知らせてください。

cssが動的に生成されることはめったにない（これはjavascriptにも当てはまります）大きな理由は、それらがキャッシュの良い候補だからです。CSSは、クラスを適切に組み合わせてページをスタイル設定する非常に柔軟な方法です。CSSで条件を設定することなく、すべての種類のキューに従ってすべての異なるページのすべての部分をスタイル設定できます。このページビューに実際に何が存在するかについてのそれ自体

CSSはページごとに異なる必要がないため、ダウンロードのコストを最適化するという非常に一般的な慣行につながります。ほとんどのサイトは、サイト全体のすべてのcssを1つのダウンロードに詰め込んでいるため、異なるページビューに適用される部分は1つのダウンロードファイルにのみ存在します。キャッシュを使用すると、クライアントは2回目のダウンロードを待つ必要がなくなります。さらに重要なことは、コンテンツプロバイダーとして、コンテンツを複数回アップロードするための費用を支払う必要がないことです。静的コンテンツを提供するのにより適したサーバーに静的CSSを配置することもできます。これにより、アプリケーションサーバー上の実際の動的コンテンツのためにリソースが解放されます。

この方法は非常に一般的であるため、多くのブラウザはcssが静的であると想定しています。また、既に持っているCSSをダウンロードすることを非常に嫌います。ユーザーがページをリロードしても。この特別な扱いはCSSにのみ適用されます。他のコンテンツタイプは期待どおりにリロードされます。

あなたの仮定は間違っていると思います：私の最後のプロジェクトでは、アプリケーションはajaxによってロードされたサーバー生成のCSSを使用していました（あなたが見ている地図の場所に応じて、ページはまったく異なるスタイルでブランド化されていたため）

ただし、ajaxで余分なCSSを取得することで問題が解決する使用例は非常にまれであり、これに遭遇することはないかもしれません：通常、展開時に前処理（LES +ミニファイ）されキャッシュ可能な（たとえば、次のページは以前にキャッシュしたスタイルシートを再利用できるため、初期時間が短くなります。

実際には、動的CSSの使用例があります。私は3つの異なる種類で働いてきました：

1. Less — Less CSSは基本的に「変数、ミックスイン、操作、関数などの動的な動作」を追加するCSS言語拡張です。また、「ネストされたルール」も許可され、非常に便利です。Lessを主に使用して、CSSの記述の冗長性を減らし、繰り返しの一部を排除しています。

2. URLの書き換え —キャッシュの問題がないというステートメントの証拠として、PHPを使用して、長いキャッシュヘッダーを持つCSSファイルとしてスクリプトを提供してきました。主に、Webルート内にないライブラリからCSSファイルを提供するために行います。

3. 動的レポート —私が取り組んだ1つのプロジェクトで、システム内のあらゆる種類のデータのレポートビルダーがありました。style主にレポートビルダーでユーザーが選択した色の動的スタイルルールを出力します（タグ内で言及します）。

^{注： CSSをURL（1または2など）に直接出力し、スクリプトによって既に生成されているページ内に埋め込まない場合、静的コンテンツの提供に関してサーバーに非常に大きな負荷がかかります。そのため、かなりのトラフィックがある場合は、毎回動的に行うことができますが、ユースケースが許せば、静的ファイルとしてキャッシュする必要があります。}

しかし、なぜ一般的ではないのですか？1つの主な理由があると思います。CSSはコンテンツを出力するために実際には構築されていません。したがって、単に大きなニーズはありません。ユーザーが選択した動的な色、または場合によっては背景画像（画像がcontentである場合は、おそらくimgタグを使用するのが適切な引数ですが）を出力する以外に、動的に他に何をする必要がありますか？

ほとんどの動的なスタイル変更は、さまざまな静的 CSSドキュメントを参照することで生成できます。

あなたが思ったように、それは確かに可能ですが、それをするあまり多くの理由はありません。

CSSを動的に読み込むには、2つの側面があります...

1. サーバー上でCSSファイルを動的に生成する

   これは非常に簡単で、多くのWebサイトで行われています。これは、何らかの条件に基づいてCSSを変更する場合に役立ちます。たとえば、ユーザーの地理的位置に基づいてサイトのテーマを選択した場合。

2. JSスクリプトローダーを介したCSSファイルのオンデマンドロード

   これは、DOMの大部分を動的に作成し、必要なスタイルをロードする場合に便利です。しかし LABjsのように著者は述べています...

   動的に読み込まれたCSSファイルの読み込みが完了したかどうかを実際に判断することは、実際には非常に複雑であり、クロスブラウザを実行するのは困難です。「ロード」イベントは、期待/期待するとおりには発生しません。そのようなサポートを追加すると、LABjsに重要なサイズが追加されます

1. これを行います。ずっと。特に、色などがデータベースから取得されるSaaSアプリケーションの顧客固有のブランディングなどの場合。
2. 展開前または展開中、またはアプリケーションに起動フェーズがある場合はアプリケーションの起動中にCSSを事前生成する方が（ユーザーの観点から）はるかに高速です。通常、可能な場合は常に静的CSSファイルを事前生成することを好みます。
3. （ユーザーの観点から）最高の速度を得るには、静的なCSSファイルをCDNに配信し、ブラウザにアプリケーションサーバーからではなくCDNから取得させるのが最善です。これは通常、CSSファイルを展開前または展開中に事前生成できる場合、および展開の一部が事前生成された静的CSSファイルをCDNに配信する場合にのみ可能です。CDNは今では非常に安価で使いやすいです。AmazonのCloudFrontとRackspaceのCloud Filesをご覧ください。

キャッシュに問題がありますか？そうは思いません。スクリプトはキャッシュなしなどを送信する必要があります

すべて非常にうまくいきますが、それは一般的に静的な情報の重要な部分であり、ユーザーがページを読み込むたびにダウンロードするように求めています。ですから、それには十分な理由があります。

今、その理由は何でしょうか？

さまざまなパラメーターに基づいてスタイルを変更する場合は、複数のスタイルシートを用意し、HTMLを生成して正しいスタイルシートをダウンロードすることにより、それを行います。

動的なCSSはかなり単純であり、そのアプリケーションはより制限されていますが（静的なスタイルシートで動的に生成されたHTMLが日々のほとんどのニーズをどのように解決し、CSS自体が半動的を達成するためのいくつかのメカニズムを組み込んでいるのを見て）、私は多くの場合に使用されるのを見てきましたが、必要なときにいつでも自分で使用します。

多くの場合、「動的」な部分は、複数のスタイルシートを1つに組み合わせて（HTTPリクエストの数を減らす）、それらを最小化する（帯域幅の使用量を減らす）だけでなく、変数置換（たとえば、全体で使用される色の変数を使用する）スタイルシート）はあなたの人生をずっと楽にします。ただし、CSSには警告がほとんどないかなり単純な構文があるため、通常は汎用のテキスト処理システムまたはPHPのようなスクリプト言語で十分です。そのため、多くの市販のCSS処理システムは表示されません。

たぶん、あなたはそれらを認識せずに、野生で見たことがあります。動的なスクリプトを送信するサーバーは通常、URLの書き換えを使用して、URLが静的に提供されるコンテンツと区別できないようにします。一部のブラウザ（特にIE）は、特定の状況下でMIMEタイプを正しく検出するために拡張機能に依存し、送信したContent-Typeヘッダーを無視（または破棄）するため、これが必要です。

キャッシングについて：スタイルシートはGETリクエストで取り込まれ、適切なユーザーエクスペリエンスのためにキャッシュ可能にすることは絶対に重要です。リクエストごとにスタイルシートが再ダウンロードされるため、ページのリフローを見たくありません。代わりに、スタイルシート処理の出力を変更するすべてのパラメーターをクエリ文字列に配置する必要があります。異なるクエリ文字列は異なるURLを生成するため、キャッシュミスが発生するため、クライアントがすべてをキャッシュしても、パラメーターが変更されるたびにスタイルシートが再ダウンロードされます。リクエストごとに異なる可能性があり、副作用に依存するCSSが本当に必要な場合は、非動的部分を静的に提供されるスタイルシートに入れ、動的であることが絶対に必要なものだけを動的に提供することを検討してください。

動的なCSSを使用したいシナリオがいくつかありますが、CSSの基本を理解するのに少し助けが必要なデザイナーを使用することにこだわる場合が多いです。ミックスで動的言語を使用すると、実際に頭が爆発する可能性があります。

これを見るもう一つの方法は、「他の誰かが、本当に私の問題ではなく、痛みを伴う手作業をすべてやっているということです。」