いくつかの静的cssファイルをJavaScriptから動的に生成されたスタイルタグに置き換えることを検討しています。私の目的は、ドキュメント全体のスタイルシートを作成することではなく、タブやスライドショーなど、ページに追加されるプラグインに使用することです。現在扱っているスタイルシートは10〜20行です。
いくつかの利点があります。
このアプローチの欠点は何でしょうか？このトピックに関する良い参考資料をお勧めしますか？
私はいくつかの調査を行い、次のツールを見つけました。
Lessは絶対に素晴らしいです.JavaScriptのカスタムライブラリでcssを生成しようとするべきではないと思います. JavaScript を CSS からできるだけ分離しておくことをお勧めします。
特定の element class="" 属性を使用して JavaScript ロジックをトリガーしますが、less スタイルで使用されるクラスと重複することはありません。(重複が発生しないように、両方に異なる大文字と小文字の規則を使用します)。
また、css の一部を動的にロードするメリットもあまりありません。開発中にはless.js javascriptを実行していますが、本番環境では「lessc」コンパイラを実行しているため、常に1つのスタイルシートがあります(また、YUI Compressorで圧縮しています)。
css の合計が非常に巨大でない限り、最初のヒットで 1 つの大きな css ファイルをロードし、その後ファイルをキャッシュすることをお勧めします。
すべての css が (部分だけでなく) 常に読み込まれていることを確認することも、競合するルールがないことを強制するのに役立ちます。これは、リファクタリングが必要になり、アプリケーションの一部が他の URL に移動する場合 (突然の重複がすべて表示される場合) に非常に役立ちます。
したがって、必要なスタイルを動的に生成して問題を解決しようとするのではなく、css をより適切に構成する必要があるかもしれません。
less の効果的な使用例をお探しの場合は、Twitter Bootstrapをご覧ください。
もう 1 つの利点は、ページに追加のアセットが読み込まれるたびに、ページ全体の読み込みが遅くなることです。これは、ブラウザーは通常、特定の時間に同時に 4 つのアセットしか読み込まないためです。
ただし、ページの読み込み時にすべての組み合わせを行うと、処理だけでページが遅くなる可能性があります...最終的なcssブロックを構成するために反復する必要があるものの数によって異なります。
パフォーマンスに関しては、結合された css ファイルに含まれていたはずのスタイルを javascript がエレガントに/効率的に置き換えることはほとんどないように思えます。
もう 1 つのことは、実稼働環境では、ライブラリを使用して、縮小され、最適化された (JS の場合は難読化された) コードのセットを事前に生成し、1 つの js ファイルと 1 つのページの読み込み時に css ファイルが読み込まれ、速度/読み込みの利点のためにキャッシュされます。Boilerplate lib には、このためのスクリプトがあると思います。
一日の終わり: エネルギーは生成も破壊もされません。注意しないと、ある場所での最適化が他の場所であなたを傷つけます。