您是否应该将js，html和CSS分开？

我一直都在听/读到，保持js，html和css分开更干净。据说它使维护，调试更加容易。据说它更有效，因为它允许缓存/最小化CSS和JS文件。

就我而言，使用网络框架（Django，Rails等），JavaScript模板库……我倾向于将很多HTML页面拆分为多个可重用模板-如果需要，可以使用某种小部件。例如，我可以有一个新闻提要窗口小部件，一个选择多个窗口小部件等……每个窗口小部件在不同页面上的布局都一致，并且每个页面均受其JavaScript的控制。

对于这个组织-在我看来它很干净，可以最大程度地提高可重用性-我很难理解为什么将所有js和css放在单独的文件中会更简单。我认为例如这样会更简单：

在选择多个小部件文件中

• html
• 基本的CSS布局
• 用一些JS控制直接交互和UX增强。

我认为这种方式更可重用，更易于维护，因为您不必滚动浏览胖的js文件，然后切换到并滚动浏览胖的css文件，再次切换到html文件...来回。

因此，如果您坚持通常建议的分离方式，那么我很想知道你们如何组织代码。

• 是否真的有这样做的充分理由？
• 是不是网络上的指南通常假定您不会使用任何精美的工具（在这种情况下，我希望获得更多有关最佳实践的最新在线阅读资料）？
• 这只是偏好问题吗？

我保持这种结构

对于每个页面或控件，我为其指定一个html页面（或aspx或php等）的文件夹。该文件夹中还有js，xml，图像和css文件的文件夹。这些是针对页面/控件的，不是共享资源。

在网站根目录中，还有js，xml，图像和css文件夹，每个文件夹都包含网站范围的资源。

站点范围的js和css文件在服务器端汇总，并作为单个js文件返回。由于通常每页只有一页，因此仅保留页面特定的那些。

这组织了我关于资源范围的资源。虽然我在根js文件夹中可能有十几个js文件，但通过组合和缩小它们在服务器端（并缓存结果），它们将作为一个js资源返回。

当我处于页面状态时，我也没有加载特定于pagex的资源。唯一的“浪费”可能在站点范围的资源文件中，但是由于已被缓存，并且许多资源将在多个地方使用，因此效率更高。

通常，惯例是为JS / CSS / HTML创建单独的文件，以保持内容，表示和行为的分离。但是，如果速度成为问题，那么一切都会发生。

在选择多个小部件文件中

• html
• 基本的CSS布局
• 用一些JS控制直接交互和UX增强。

我有一个组织工具（trinity）可以帮助您做到这一点。

除了小部件文件被分成3个小文件，HTML，CSS和JS。这意味着您拥有单独的文件，但它们仍处于链接状态。

这样可以避免文件过多的问题，但仍然可以为您提供单独的文件。

因此，简单地将关注点分隔开并不意味着您应该拥有一个大的 HTML / CSS / JS文件。<HTML, CSS, JS>对于所有可重复使用的封装代码，您应该有多个三元组

现在，只要将所有这些文件清楚地分开，将它们都放在一个文件中就没错。

所以一个看起来像

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

很好，很棒。除了将所有内容都保存在一个文件中之外，维护人员开始混合和匹配CSS / JS / HTML太容易了。

随着时间的流逝，它很容易变成意大利面。

人们推广单独文件的主要原因是两方面的

• 单独下载。一旦将任何css / js代码复制并粘贴到多个“窗口小部件”中，就需要将其分解为自己的文件。
• 通过不依赖作者将其css / js / html很好地分隔在一个文件中来积极地预防意大利面条式代码

分隔html，css和js是一个好习惯，因为它可以简化您的网站管理。

刚开始时，您可能只有一个main.index.html和一个styles.css文件，但是随着网站的增长，它最终会具有多个特定于单个组件或组件的脚本和样式表。端点。

使用分隔：

• 可以在其他页面上重用单独的JavaScript
• 单独的CSS可以使站点易于重新使用，并具有新的外观
• 单独的HTML可以专注于内容而不是外观。

还应提及，如果在您网站上的多个页面上使用CSS / JS，则可以将其缓存