できるだけJSを避け、代わりにCSSを使うべきですか？

Question

私はベストプラクティスの答えを探しています。現在、私のウェブサイトのナビゲーションバーにドロップダウンメニューを追加しようとしています。私はCSSを使用してそれを行うことができ、JS - Angularを使用して行うこともできることを発見しました。私はそれを読んだことがあるので、JS悪意のあるものは、JSを無効にするいくつかの人々をプログラムすることができます。したがって、より多くのコンピュータにあなたのウェブサイトの機能を維持するには、CSSでプログラミングする必要があります。これにメリットはありますか？可能な限りJSでのコーディングを避けるべきですか？

Answer 1

CSSを使用してCSSを使用することを好む理由はほとんどありません。

• CSSアニメーションは、JS アニメーションと比較してパフォーマンスがはるかに優れています。 CSSはアニメーションをレンダリングするためにJSと同じくらい多くのメモリを消費しません。
• アニメーションが画面の幅に依存する場合、CSSメディアクエリーは遅れなくチャームのように機能します。しかし、JSを使用してこれを達成する必要がある場合は、イベントをウィンドウサイズにバインドし、すべてのサイズ変更でアクションを実行する必要があります。
• JavaScriptアニメーションはCSSアニメーションよりもわずかに高いオーバーヘッドを持っています。なぜなら、最終的にJSアニメーションはアニメーションのCSSスタイルを操作するためです。

しかし、彼らの言うように、あらゆる利点には欠点があります。 CSSアニメーションは、アニメーションを自由に実行することはできません。スケール、回転、及び要素の位置をアニメート

は非常に一般的です。 CSSでは、それらはすべて1つの「変換」プロパティに詰め込まれており、単一の要素上で本当に異なる方法でアニメーション化することは不可能です。たとえば、 "回転"と "スケール"を別々のタイミングと簡単にアニメートする場合はどうでしょうか？たぶん要素が連続的に脈動していて、ロールオーバで回転させたいと思うかもしれません。それはJavaScriptでのみ可能です。

参考：Myth Busting: CSS Animations vs. JavaScript

あなたはJSアニメーションの柔軟性とCSSアニメーションの速度が必要な場合は、JavaScriptの上に構築されており、CSSアニメーションよりもはるかに高速ですされ、GSAPを試してみてください。Hereは、CSSアニメーション（Zeptoを使用）、jQueryアニメーション、GSAPアニメーションを比較したパフォーマンステストです。忘れてはならないが、結果はレンダリングエンジンごとに異なる可能性がある。

結論： これはあなたがそれについて行く方法です。

簡単なアニメーション、CSSの達成可能：使用CSS

簡単なアニメーションは、CSSで実現することができない：使用JS

ヘビーアニメーション：使用GSAPをかrequestAnimationFrameであなたのアニメーションを作ります。

Hereは、CSSアニメーションとJS​​の実装の間の驚くべきパフォーマンスの比較です。

Answer 2

CSSは、（X）HTML文書のスタイルを設定する最善の方法です。

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

ルールは次のようになります。あなたが予測可能なドキュメントのスタイルを設定することができます

使用純粋なCSSは - また、あなたのCSSを強化し、一般化や複雑なシナリオのためのCSSセレクタを使用することができます - 。 JavaScriptのようなJavaScript/DOMやフレームワークを使用すると、ドキュメントやその一部が予測不可能になったり、オンザフライで作成されたり、フェードやその他の特殊効果を適用している場合 - 実際、CSS 3.0ではトランジションが可能ですJavaScriptなしでたくさんのことをする - 。 結局のところ、CSSを使って簡単にできることや、JavaScriptを代わりに使っているような過酷なことを考え、その短所（ブラウザの互換性とパフォーマンス）を念頭に置いてください。

より多くのCSSを使用するほど、より標準化されたクロスブラウザ、パフォーマンス、保守性の高いWebです。