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

我在NetBeans中有一个很大的遗留Web项目。大部分CSS文件都包含在标题中。在所有（或几乎所有）页面上都需要一些CSS，并且一些仅在一部分页面上。什么是在项目中组织CSS/JavaScript的最佳方式

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

这种情况会是一个很好的解决方案/妥协吗？

谢谢！

来源

2013-12-11 sempervirescent

未使用的CSS的大小差异真的很重要吗？ – Anthony

我会先做一些测量。潜在的性能胜利是否值得引入样式错误？您是否设置了测试多重浏览器中的重构结果？ – stackunderflow

我使用http://unused-css.com/来检查正在使用/未使用的内容。似乎有很大比例的包含在网站的主页上并未被使用。然后，有大量的CSS包含超过50％的未使用的代码。因此，随着不同页面的开发，所有的css都被创建在相同的.css文件中，而不是新的css文件中，因此很多页面都没有使用css的很大一部分。 – sempervirescent

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

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

Everypage得到这些：

normalize.css样式
base.css样式表（包含像表单元素，标题，段落默认元素等风格

然后，我们得到更具体的，我尽量保持我的代码尽可能模块化，所以我尝试将UI组件像标签和滑块一样分组在一起，然后什么不是那么我woul d具有

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易于维护和真正的可扩展性，同时通过允许你只包含需要的东西来提高性能。

希望这是有帮助的！

来源

2013-12-11 18:19:34 kkemple

我不知道你有一个银弹的答案。你可能需要做一些测试，以找到适合您的使用情况下的最佳组合：

最大限度地减少初始下载大小
尽量减少HTTP的请求总数
最大化CSS的缓存能力

例如，您可能有一些CSS用于网页的50％。为了尽量减少初始下载大小，你可能想要把这个CSS保存在单独的文件中。但是，这会增加进行新下载需要的页面所需的HTTP请求数量。因此，如果这个CSS的体积相对较小，那么您可以选择将其与主CSS相混合，进行初始下载命中，但当用户在您的网站周围浏览时，不需要对此CSS进一步发出HTTP请求。

您需要这样做的分析确定您的网站的最佳方法。

来源

2013-12-11 18:31:23

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

回答

相关问题