動的に生成されたCSS

Question

JavaScriptから動的に生成されたスタイルタグでいくつかの静的CSSファイルを置き換えることを検討しています。私の目的は、ドキュメント全体のスタイルシートを作成するのではなく、タブ、スライドショーなどのページに追加されるプラグインに使用することです。現在扱っているスタイルシートは10行から20行です。

私はいくつかの利点を参照してください。その場でテーマ設定を定義する代わりに、JSとCSS両方の唯一のJSファイル

• 負荷を
• 能力（例えば変数として色を入力してください）
• セレクタを定義する機能フライ（例えば名前空間のクラス名）
• アドオンブラウザ固有のスタイルに

欠点だろう何このアプローチの？このトピックについての良い参考資料をお勧めしますか？

私はいくつかの研究を行なったし、次のツールが見つかりました：

• lessを - それでも、別のスタイルシートCSSのためにJavaScriptを使用して
• DiceJS（明らかに新しいライブラリ）

Answer 1

をチェックアウトするもう一つの利点は、ページ内にロードされている追加の各資産は、全体のページのロードが遅くなるということでしょう典型的には、所与の時間に4つの資産を同時にロードするだけである。

しかし、ページのロードに組み合わせることのすべてをやってするページだけでは処理から同じくらい遅くさせる可能性があります...それは、最終的なCSSのブロックを構成するために反復処理する必要がありますどのように多くのものに依存します。

パフォーマンス面では、javascriptは、CSSファイルに含まれていたスタイルをエレガントに/効率的に置き換えることはほとんどありません。

もう1つのことは、実稼働環境では、ライブラリを使用して、縮小、最適化、およびJSのコードで難読化されたコードのセットを事前生成してから、1 jsファイルと1 cssファイルが読み込まれ、スピード/ローディングのメリットのためにキャッシュされます。ボイラープレートのlibにはこれについてのスクリプトがあります。

終わり：エネルギーは作成も破壊もされません。あなたの最適化は1か所で行い、慎重でないと他の場所で傷つけることはありません。

Answer 2

をロードする必要があり私の意見では、ちょっと混乱したように聞こえる。あなた自身を言及すると、私は代わりにLESSまたはSASSまたは類似のものを使用することをお勧めします。はい、余分なリソースが1つ読み込まれることになりますが、JavaScriptをスタイリングに使用する場合に比べると十分な価値があると思います。私の意見では、それは目的のための間違ったツールです。

Answer 3

私はあなたがjavascriptでカスタムライブラリを使ってCSSを生成しようとするべきではないと思っています。できるだけあなたのCSSからあなたのJavaScriptを別々に保つことは良い考えです。

javascriptロジックをトリガーするために特定の要素class = ""属性を使用しますが、lessスタイルで使用されるクラスと重複することはありません。 （重複が起こらないようにするために、異なるケーシングルールを使用します）。

あなたのCSSの部分を動的に読み込むことはあまり効果がありません。私たちは開発中にless.jsのjavascriptを実行していますが、生産のためにlesscコンパイラを実行していますので、常に1つのスタイルシートがあります（そしてYUI Compressorで圧縮しています）。

CSSが完全に大量でない限り、最初のヒット時に1つの大きなCSSファイルを読み込み、その後にファイルをキャッシュすることをお勧めします。

あなたのcssが（部品だけでなく）常にロードされていることを確認すると、矛盾するルールがないことを強制するのに役立ちます。リファクタリングが必要な場合や、アプリケーションの一部が他のURLに移動した場合（突然オーバーラップがすべて表示されるような場合）、これは本当に役に立ちます。

私は、必要なスタイルを動的に生成することで問題を解決しようとするのではなく、あなたのCSSのためのより良い組織が必要かもしれないことをお勧めします。

あなたは以下の有効利用の偉大な例を探しているなら、ブラウザがあるので、Twitter Bootstrap