あなたは本当にあなたのjs、html、cssを別々に保つべきですか？

私はあなたのjs、html、およびcssを分離しておく方がよりクリーンであるといつも聞いたり読んだりします。おそらくそれは保守、デバッグをより簡単にします。それは縮小化/キャッシュすることができますので、たぶんそれは、より効率的であり、CSSやJSファイルを。

私に関する限り、Webフレームワーク（Django、Railsなど）、javascriptテンプレートライブラリなどを使用しています...単一のhtmlページを複数の再利用可能なテンプレートに分割する傾向があります。 。たとえば、ニュースフィードウィジェットや複数のウィジェットを選択することができます。各ウィジェットは、さまざまなページ全体で一貫したレイアウトを持ち、それぞれがJavaScriptの一部によって制御されています。

この組織では、可能な限りクリーンで再利用性を最大化しているように見えますが、すべてのjsとcssを別々のファイルに保存する方が簡単な理由を理解するのに苦労します。私はそれが例えばもっと簡単になると思います：

で選択し、複数のウィジェットファイル

• html
• 基本的なCSSレイアウト
• 少しのJSによる直接対話の制御とUX拡張。

ファットjsファイルをスクロールしてからファットcssファイルに切り替えてスクロールする必要がなく、HTMLファイルにもう一度切り替える必要がないため、再利用可能ではるかに保守しやすいと思います。 。

したがって、通常推奨される分離に固執する場合は、皆さんがコードを編成する方法を知りたいです。

• そうする正当な理由は本当にありますか？
• Web上のガイドは、通常、高度なツールを使用しないと想定しているのではないですか（この場合、ベストプラクティスのために、最新のオンラインリーディングを入手したいと思います）。
• それは好みの問題ですか？

私はこの構造を維持します

各ページまたはコントロールごとに、HTMLページ（またはaspx、phpなど）のフォルダーを指定します。そのフォルダーには、js、xml、images、cssファイルのフォルダーもあります。これらはページ/コントロール固有のものであり、共有リソースではありません。

サイトのルートには、js、xml、images、cssフォルダーもあり、それぞれにサイト全体のリソースが含まれています。

サイト全体のjsおよびcssファイルはサーバー側にロールアップされ、単一のjsファイルとして返されます。通常、ページごとに1つしかないため、ページ固有のものはそのまま残されます。

これにより、リソースの範囲が整理されます。そして、私はルートのjsフォルダーにダースのjsファイルを持っているかもしれませんが、それらをサーバー側で結合して縮小する（そして結果をキャッシュする）ことによって1つのjsリソースとして返されます。

また、pageyにいるとき、pagexに固有のリソースをロードしていません。唯一の「無駄」はサイト全体のリソースファイルにある可能性がありますが、キャッシュされるため、リソースの多くが複数の場所で使用されるため、より効率的です。

一般に、慣例では、コンテンツ、プレゼンテーション、および動作の分離を維持するために、JS / CSS / HTML用の個別のファイルを用意します。ただし、速度が問題になる場合は、問題が発生します。

複数選択ウィジェットファイル内

• html
• 基本的なCSSレイアウト
• 少しのJSによる直接対話の制御とUX拡張。

私はあなたがそれを行うことを促進する組織化ツール（三位一体）を持っています。

ただし、ウィジェットファイルは、HTML、CSS、JSの3つの小さなファイルに分割されます。これは、別のファイルがあるが、それらはまだリンクされていることを意味します。

これにより、ファットファイルの問題は回避されますが、それでも別のファイルが提供されます。

したがって、懸念の分離を単に置くことは、1つの大きな HTML / CSS / JSファイルが必要であることを意味しません。<HTML, CSS, JS>再利用可能なすべてのカプセル化されたコードに対して、複数のトリプレットが必要です

これらが明確に分離されている限り、これらすべてを1つのファイルに含めることに問題はありません。

したがって、次のようなウィジェット

<div id="wrapper">
  <style scoped> CSS code </style>
  <script> JS code </script>
  HTML code
</div>

元気です、そして素晴らしいです。1つのファイルにすべてを含めることを除いて、メンテナーがCSS / JS / HTMLを混合して一致させることは非常に簡単です。

時間が経つにつれ、スパゲッティに変わるのは簡単すぎます。

人々が別々のファイルを宣伝する主な理由は2つあります

• 別のダウンロード。css / jsコードをコピーして複数の「ウィジェット」に貼り付けたらすぐに、それを独自のファイルに分解する必要があります。
• 単一のファイルでcss / js / htmlを適切に分離することを作成者に頼らないことで、スパゲッティコードを積極的に予防します