Sollten Sie Ihre js, html und css wirklich getrennt halten?

Ich höre / lese die ganze Zeit, dass es sauberer ist, Ihre js , html und css getrennt zu halten. Angeblich macht es das Warten und Debuggen einfacher. Angeblich ist es effizienter, weil es Caching / Verkleinerungs ermöglicht CSS und JS - Dateien.

Was mich betrifft, verwende ich Web-Frameworks (Django, Rails, ...), Javascript-Vorlagenbibliotheken, ... Ich teile eine einzelne HTML-Seite häufig in mehrere wiederverwendbare Vorlagen auf - eine Art Widgets, wenn Sie dies wünschen . Zum Beispiel kann ich ein Newsfeed- Widget, ein Widget mit mehreren Auswahlmöglichkeiten usw. haben. Jedes Widget hat ein einheitliches Layout auf den verschiedenen Seiten und wird von seinem Javascript gesteuert.

Bei dieser Organisation, die mir so sauber wie möglich erscheint und die Wiederverwendbarkeit maximiert, kann ich nur schwer verstehen, warum es einfacher wäre, alle JS und CSS in separaten Dateien zu speichern. Ich denke, es wäre zum Beispiel viel einfacher :

in der Datei mit mehreren Widgets auswählen

• html
• grundlegendes CSS-Layout
• Kontrolle über direkte Interaktionen und UX-Verbesserungen mit etwas JS.

Ich denke , dass , wie es mehr wiederverwendbar, viel besser verwaltbar ist, weil Sie blättern durch ein Fett haben keine js - Datei, wechseln Sie dann zu und blättern durch eine Fett CSS - Datei, wechseln Sie wieder in Ihre HTML - Datei ... hin und her .

Ich würde gerne wissen, wie ihr euren Code organisiert, wenn ihr euch an die normalerweise empfohlene Trennung hält.

• Gibt es wirklich gute Gründe dafür?
• Ist es nicht so, dass die Anleitungen im Web normalerweise davon ausgehen, dass Sie kein ausgefallenes Tool verwenden (in diesem Fall würde ich gerne aktuellere Online-Lesungen für Best Practices erhalten)?
• Ist es nur eine Frage der Präferenz?

Ich behalte diese Struktur bei

Für jede Seite oder jedes Steuerelement gebe ich einen Ordner für die HTML-Seite (oder Aspx oder PHP usw.). In diesem Ordner befinden sich auch Ordner für JS-, XML-, Bilder- und CSS-Dateien. Diese sind für seiten- / steuerungsspezifische, nicht gemeinsam genutzte Ressourcen bestimmt.

Im Site-Stammverzeichnis befinden sich auch die Ordner js, xml, images und css, die jeweils standortweite Ressourcen enthalten.

Die standortweiten JS- und CSS-Dateien werden serverseitig aufgerollt und als einzelne JS-Datei zurückgegeben. Die seitenspezifischen, da es normalerweise nur eine pro Seite gibt, werden alleine gelassen.

Dies organisiert meine Ressourcen hinsichtlich ihres Umfangs. Und obwohl ich möglicherweise ein Dutzend js-Dateien im js-Stammordner habe, werden sie als eine js-Ressource zurückgegeben, indem sie serverseitig kombiniert und minimiert werden (und das Ergebnis zwischengespeichert wird).

Ich lade auch keine für pagex spezifischen Ressourcen, wenn ich auf pagey bin. Die einzige "Verschwendung" befindet sich möglicherweise in der Site-weiten Ressourcendatei. Da sie jedoch zwischengespeichert ist und viele der Ressourcen an mehreren Stellen verwendet werden, ist sie effizienter.

Im Allgemeinen besteht die Konvention darin, separate Dateien für JS / CSS / HTML zu haben, um eine Trennung von Inhalt, Präsentation und Verhalten aufrechtzuerhalten. Wenn jedoch Geschwindigkeit zum Problem wird, ist alles möglich.

in der Datei mit mehreren Widgets auswählen

• html
• grundlegendes CSS-Layout
• Kontrolle über direkte Interaktionen und UX-Verbesserungen mit etwas JS.

Ich habe ein Organisationstool ( Trinity ), mit dem Sie das tun können.

Außer dass die Widget-Datei in 3 kleine Dateien aufgeteilt ist, HTML, CSS und JS. Dies bedeutet, dass Sie Ihre separaten Dateien haben, diese jedoch weiterhin verknüpft sind.

Dies vermeidet das Problem von fetten Dateien, gibt Ihnen aber dennoch separate Dateien.

Einfach gesagt, Trennungen von Bedenken bedeuten nicht, dass Sie eine große HTML / CSS / JS-Datei haben sollten. Sie sollten mehrere Drillinge <HTML, CSS, JS>für all Ihren wiederverwendbaren gekapselten Code haben

Jetzt ist nichts falsch daran, all dies in einer Datei zu haben, solange sie klar voneinander getrennt sind.

Also ein Widget, das aussieht

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

Ist in Ordnung und großartig. Wenn Sie nicht alles in einer Datei haben, ist es für einen Betreuer viel zu einfach, mit dem Mischen und Anpassen von CSS / JS / HTML zu beginnen.

Es macht es viel zu einfach, dass es sich im Laufe der Zeit in Spaghetti verwandelt.

Der Hauptgrund, warum Leute für separate Dateien werben, ist zweierlei

• separate Downloads. Sobald Sie CSS / JS-Code kopieren und in mehrere "Widgets" einfügen, müssen Sie ihn in die eigene Datei einbeziehen.
• Überwältigt aggressiv den Spaghetti-Code, indem er sich nicht darauf verlässt, dass der Autor seine CSS / JS / HTML in einer einzigen Datei gut getrennt hält