18

レスポンシブ デザインに取り組んでいますが、要素のスタイルを JavaScript と CSS のどちらで設定した方がよいでしょうか? CSS は確かに保守が簡単です。それについては議論しませんが、私は JavaScript でオブジェクトを作成する方がはるかに快適です。必要以上に自分のために仕事をしているのかもしれませんが、全体をよりコントロールできるようになり、画面上のすべてのオブジェクトに接続できるようになりました。

ページ レイアウト全体を生成して DOM にプッシュするコンストラクタがあります。画像はなく、純粋な JavaScript スタイルと SVG アイコンのみです。

私が知りたいのは：

  • 何がより良いパフォーマンスを発揮しますか?
  • JS や CSS のハードウェア サポートがある場合はどうなりますか?
  • 純粋な JavaScript ソリューションは、CSS Calc() を使用するよりも優れていますか?
  • よりポータブルなものは何ですか？
  • より前方互換性があるのは何ですか?

jQuery を避ける傾向があるのは、現在何が機能しているかを知りたいからです。そのため、純粋な JavaScript と CSS3 のみを使用してください。

4

4 に答える 4

24

スタイリングは、可能な限り CSS を使用して行う必要があります。必要に応じてさまざまなクラスを設定し、JS で絶対に必要な場合はクラスを追加または削除します。

覚えておくべきことの 1 つは、JS によるスタイルの変更は 1 回限りの変更であるということです。Ajax を介して動的に追加された要素は、スタイルの変更を自動的に継承しません。CSS に固執するもう 1 つの正当な理由。

追加の確認については、この投稿を参照してください。JS または CSS を介してレスポンシブ デザインをロードする必要があります

リンクで提案されているように

スタイルに関するすべてを CSS ファイルに入れるのがベスト プラクティスです。

HTML => 構造

CSS => スタイル

JS => ロジック

于 2013-10-04T18:38:53.970 に答える
19

CSS は、(X)HTML ドキュメントのスタイルを設定する最良の方法です。

生の JavaScript や DOM、または jQuery などのフレームワークを使用してドキュメントのスタイルを設定する必要がある場合でも、CSS ルールに値を指定していることになります。

ルールは次のとおりです。

  • 予測可能なドキュメントのスタイルを設定できる場合は、純粋な CSS を使用します。また、CSS を強化し、一般化されたシナリオまたは複雑なシナリオで CSS セレクターを使用することもできます。

  • ドキュメントまたはその一部が予測できない場合、またはオンザフライで作成され、フェードやその他の特殊効果を適用する場合は、JavaScript/DOM または JavaScript のようなフレームワークを使用します。実際、CSS 3.0 にはトランジションがあるため、 JavaScript なしで多くのことを行う -.

結局のところ、CSS を使用すると物事がどれだけ簡単になるか、代わりに JavaScript を使用することでどのようなやり過ぎが発生するかを考え、その短所 (非常に重要な点: ブラウザーの互換性とパフォーマンス) を念頭に置いてください。

CSS を使用すればするほど、Web はより標準化され、クロスブラウザーになり、パフォーマンスが向上し、保守が容易になります。

于 2013-10-04T18:41:32.037 に答える
5

UI は UI ソリューション (HTML/CSS) に任せるべきです。JavaScript は追加機能のみを提供する必要があります。

これを補足するために (CSS3 に言及しているため)、アニメーションや CSS3 への新しい追加 (他の方法では利用できない可能性があります) について言及している場合は、javascript を使用できますが、フォールバックとしてのみ使用できます。fadeTo(たとえば、CSS3 でアニメーション タイムラインを作成するよりもjQuery を使用する)。

于 2013-10-04T18:38:35.833 に答える
3

There are serious drawbacks when applying styles with JavaScript, not only because you have no control over specificity, it is slow (as you'd expect), any .css() calls involving classes, e.g. $('.something').css(...), will apply css to only elements of that class that exist at the time, not .somethings created in the future.

于 2013-10-04T18:48:11.867 に答える