javascriptを使用して複数のスタイルでスタイルタグを追加するのは悪い習慣ですか？

Question

私はスタイルタグとJavascriptに関する質問があります。多くのプラグインやスクリプトには、スタイリング用に別のCSSファイルが付属しています。だから、これを避けてスタイルタグを使用してページの先頭に追加し、それらのスタイルをプラグインに使用するのは悪い習慣ですか？例えば

、このコード：

var style = document.createElement('style'); 

style.type = 'text/css'; 

style.innerHTML = '.hg-grid-item-4{ width: calc(24.25% - '+Options.padding * 2+'px); padding: '+Options.padding+'px; float: left; margin-bottom: 1%}'; 

document.getElementsByTagName('head')[0].appendChild(style); 

は、外部CSSスタイルシートを必要とせずに、ウェブサイトにいくつかのスタイルを追加します。これは古いブラウザで問題を引き起こすでしょうか？

また、私の例でわかるように、パディングと幅に変数を使用しました。外部CSSを使用するように献身している場合、これを行う方法はありますか？前もって感謝します！

Answer 1

あなたはCSSでの計算値（）は必要ありません。ほとんどの場合
• - このは常に遅いものダウンビットと一般的にはほとんど常に、より簡単な方法で行うことができるオーバー合併症をある
• あなたがやったように物事をすることは、非jsバージョンを考慮しません。だから、特に.hg-grid-item-4のようなスタイルを作るときのベストプラクティスではないので、あなたが使っているグリッドをいくつか仮定します。 JSが無効になっているとこれはひどく壊れませんか？
• これは、コードのメンテナンス性を低下させます。ロジックをスタイリングと組み合わせる理由は何でしょうか？一般に、Sassを使用してOptionsを定義するのが良い考えです.Padを実際にJSで計算する必要がない場合は、そこに追加してください。それは？

Answer 2

JavaScriptでDOMにスタイルタグを追加することは、JavaScriptにとっては全く合法ですが、これは「ベストプラクティス」とはみなされません。

コードを書くときは、アプリケーションロジックからビューを分離することをお勧めします。これを行う最も簡単な方法は、すべてのスタイルをCSSファイルに入れることです。また、他の開発者がコードを理解しやすくするという利点もあります。詳細については

：あなたの変数のパディングの質問に関しては

• Separation of concerns
• MVC

は、バニラCSSで、これはCSSで変数を使用するためには、可能ではありません、 SASSまたはLESSのようなCSSプリプロセッサを使用する必要があります。しかし、私はこれがあなたの問題に対して過度のものになると思っています。Flexboxを使って柔軟なスタイルを作ることも、固定マージンやパディングの代わりにパーセントを使うこともできます。