Question

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

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

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

谢谢！

Answer 1

使用遗留代码很难做到这一点，因为你必须倾注它，看看页面上实际使用的是什么，不太确定最佳路线，但对于新项目，有几种方法可以组织你的CSS。首先让我们讨论纯CSS：

除了一些.htaccess trickery之外，没有多少方法可以解决多个请求（请查看关于.htaccess技巧的答案），所以除此之外你需要以合理的方式分解你的CSS ，这就是我如何处理这个问题。

Everypage得到这些：

normalize.css stylesheet
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易于维护且可扩展，同时还可以通过仅包含所需内容来提高性能。

希望这有用!!

Answer 2

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

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

例如，您可能有一些CSS在50％的页面上使用。要最小化初始下载大小，您可能希望将此CSS保留在单独的文件中。但是，这会增加完全需要它的页面下载所需的HTTP请求数。因此，如果这个CSS的大小相对较小，您可以选择将其与主CSS一起使用，进行初始下载命中，但是当用户在您的站点中导航时，不需要对此CSS进行进一步的HTTP请求。

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

在项目中组织CSS / JavaScript的最佳方法是什么？

2 个答案: