javascript - JavaScript を集中的に使用する作業を行うときに、すべてのスタイルを CSS ファイルに保持する利点は何ですか?

Question

すべてのスタイリングを CSS ファイルに保持する必要があるという信念があるようです。純粋に JavaScript の作業を行っている場合、これは意味がありません。「StatisticSummaryPanel」という名前の JavaScript オブジェクトを作成する場合、CSS スタイルを JavaScript オブジェクト内に保持することをお勧めします。そうすれば、2 つのファイルではなく 1 つのファイルを維持するだけで済みます。

Answer 1

一般に、CSS、JavaScript、および HTML を別々のファイルに格納することをお勧めします。これは、自分自身や、ファイルを処理する潜在的な将来の開発者にとって、検索、理解、およびデバッグが容易になるためです。

JavaScript ファイルでは、CSS ファイルに保存されているプロパティを持つクラスまたは ID を参照するだけの単純な方法です。

たとえば複数の JavaScript オブジェクトでクラスを再利用し、そのクラスのプロパティを変更する必要がある場合は、CSS ファイルを更新するだけで済みます。

Answer 2

別のページ/javascript ファイルで同じスタイルを再利用する必要がある場合に役立ちます。これにより、スタイルが変更された場合でも、それを使用するすべてのファイルを変更する必要はありません。

また、キャッシュしてページを少し速くすることもできます。

そして、より多くのファイルを維持するようになり、ファイルのサイズに基づいた呼び出しになります。大きすぎると、1 つのファイルを維持するのにコストがかかります。

Answer 3

いくつかの問題があります:

1.コードの読みやすさ

JavaScript で CSS や HTML を記述すると、独自の構文で直接記述した場合に比べて冗長になり、読み取りや編集が困難になります。

2. 紛らわしい行動と論理

基本的な機能を実現するには最低限のスタイリングが必要ですが、外観とロジックを混同しないでください。外観に関するコードを行動に関するコードに統合する方法と場所を理解することは、無意味な作業です。コードは、ビヘイビア スクリプトに難解なスタイル要件が組み込まれていないため、より明確になります。

3. 検索

人々は Javascript に CSS があるとは思っていません。の外観を変更しようとする場合StatisticSummaryPanel、CSS でそれを探します。その文体の定義が見つかると彼らが期待する最後の場所は JS です。

Answer 4

関心の分離: この場合、プレゼンテーション (さまざまな効果がどのように現れてレンダリングされるか) と動作 (前述の効果の原因) の分離です。私たちの経験では、この 2 つを分離することで、前者には優れたグラフィック デザイナーを、後者には優れたプログラマーを雇うことができます。

小規模なプロジェクトの場合、コードを担当するのはあなただけなので、おそらく問題にはなりません。ただし、チームへの拡大を計画している場合は、さまざまなメンバーがどのように専門化できるか、チームメイト間で変更を調整するのに最適な方法について検討する価値があります。