在项目中组织 CSS/JavaScript 的最佳方式是什么[关闭]答案

【问题标题】：What is the best way to organize CSS/JavaScript in a project [closed]在项目中组织 CSS/JavaScript 的最佳方式是什么[关闭]
【发布时间】：2013-12-11 17:31:44
【问题描述】：

我在 NetBeans 中有一个大型遗留 Web 项目。大多数 CSS 文件都包含在标题中。所有（或几乎所有）页面都需要一些 CSS，而一些仅在页面子集上。

我想至少重新组织具有高流量的页面，以确保它们不包含未使用的 CSS。为此，我将不得不创建多个要包含在其中的小 CSS 文件（在标题中仅保留最少数量的包含）。但我担心如果我有多个外部 CSS 包含它会导致对该页面的更多 http 请求，所以我不确定什么是最好的解决方法。我想提高页面性能，但我不想减少未使用的 CSS 并最终在这些页面上产生过多的 http 请求。

对于这种情况，什么是好的解决方案/妥协？

谢谢！

【问题讨论】：

未使用的 CSS 的大小差异真的那么大吗？
我会先做一些测量。潜在的性能胜利值得冒引入样式错误的风险吗？您是否准备好在多个浏览器中测试重构结果？
我使用unused-css.com 来检查正在使用/未使用的内容。似乎很大比例的包含内容没有在网站主页上使用。然后有大量的 css 包含其中超过 50% 的代码未使用。因此，随着不同页面的开发，所有的 css 都是在相同的 .css 文件中创建的，而不是新的，因此在很多页面上，很大一部分 css 没有被使用。
@stackunderflow 我一直在 IE、Firefox、Chrome 和 Safari 中进行测试。
@Anthony 我正在寻找有关如何在未来避免这种情况的一般指导方针，并希望获得一些关于如何开始修复项目当前状态的良好指示。谢谢！

标签： javascript css reorganize

【解决方案1】：

使用遗留代码很难做到这一点，因为您必须将其倒过来并查看页面中实际使用的内容，不太确定最佳路径，但对于新项目，有几种方法可以组织你的 CSS。首先让我们讨论一下纯 CSS：

除了一些.htaccess trickery（查看关于 .htaccess 技巧的答案）之外，没有太多方法可以解决多个请求，所以除此之外，您需要以合理的方式分解您的 css，在这里这就是我的处理方式。

每个页面都有这些：

normalize.css 样式表
base.css 样式表（包含表单元素、标题、段落等默认元素的样式

然后我们变得更具体，我尽量让我的代码尽可能模块化，所以我尝试将 UI 组件组合在一起，比如选项卡和滑块，然后我就会有什么

ui.css

最后是网站各部分的单独表格，如果我有管理部分，则admin.css 用于那些对于上述任何文件都过于具体的东西

我可能还有 account.css 或 app.css 用于前向代码

现在，如果您可以使用 Less 或 Sass 之类的东西，您就可以真正优化您的代码。

因为你有预编译的能力，你可以使用导入，你可以为你的站点/应用程序的部分创建更少的文件，只导入 css 组件，一个例子是这样的：

admin.less

@import 'normalize.less';
@import 'base.less';
@import 'ui/forms.less';
@import 'ui/admin-dashboard.less';
@import 'ui/admin-update.less';

app.less

@import 'normalize.less';
@import 'base.less';
@import 'ui/forms.less';
@import 'ui/widgets/login.less';
@import 'ui/widgets/signup.less';
@import 'ui/widgets/other-widget.less';

这就是所有这些主文件包含的内容。这样，当您需要进行更改或添加新代码或新功能时，您可以创建一个新文件，然后将其导入。您还可以根据需要创建任意数量的主文件，并且只在每个页面上准确提取需要的内容。

这为您提供了很好的控制，并使您的 css 易于维护和真正可扩展，同时还通过允许您只包含需要的内容来提高性能。

希望对你有帮助！！

【讨论】：

【解决方案2】：

我不知道你有一个灵丹妙药的答案。您可能需要进行一些测试，才能为您的用例找到以下最佳组合：

最小化初始下载大小
最小化 HTTP 请求的总数
最大化 CSS 的可缓存性

例如，您可能有一些 CSS 用于 50% 的页面。为了最小化初始下载大小，您可能希望将此 CSS 保存在单独的文件中。但是，这会增加重新下载需要它的页面所需的 HTTP 请求数量。因此，如果此 CSS 的大小相对较小，您可能会选择将其与主 CSS 混为一谈，进行初始下载点击，但在用户浏览您的网站时无需对该 CSS 进行进一步的 HTTP 请求。

您需要进行此类分析以确定适合您网站的最佳方法。

【讨论】：