单个巨大的。css文件vs.多个较小的特定。css文件?

拥有一个包含几乎每个页面都要使用的样式元素的怪物.css文件有什么好处吗?

我在想，为了便于管理，我想把不同类型的CSS拉出到几个文件中，并包括我的主<link />是坏的吗?

我觉得这样更好

positions.css buttons.css tables.css copy.css

vs.

site.css

你见过用一种方法做和用另一种方法做有什么问题吗?

当前回答

我更喜欢在开发过程中使用多个CSS文件。这样管理和调试就容易得多。但是，我建议你在部署时使用像YUI Compressor这样的CSS缩小工具，它可以将你的CSS文件合并成一个整体文件。

其他回答

这个问题很难回答。在我看来，这两种选择各有利弊。

我个人不喜欢阅读一个巨大的CSS文件，维护它是非常困难的。另一方面，分离它会导致额外的http请求，这可能会降低速度。

我的观点有两种。

1)如果你知道你的CSS一旦你构建了它就永远不会改变，我会在开发阶段构建多个CSS文件(为了可读性)，然后在正式运行前手动组合它们(以减少http请求)

2)如果你知道你会偶尔改变你的CSS，并且需要保持它的可读性，我会构建单独的文件，并使用代码(如果你使用某种编程语言)在运行时构建时将它们组合起来(运行时缩小/组合是一个资源猪)。

无论是哪种选择，我都强烈建议在客户端进行缓存，以进一步减少http请求。

编辑: 我发现了这个博客，它展示了如何在运行时只使用代码就组合CSS。值得一看(尽管我自己还没有测试过)。

编辑2: 我决定在设计时使用单独的文件，并通过构建过程来缩小和合并。这样，我可以有单独的(可管理的)css，而我开发和一个适当的整体缩小文件在运行时。我仍然有我的静态文件和更少的系统开销，因为我没有在运行时进行压缩/缩小。

注意:对于你的购物者，我强烈建议使用捆绑器作为构建过程的一部分。无论您是从IDE内部构建，还是从构建脚本构建，捆绑器都可以通过包含的exe在Windows上执行，也可以在任何已经运行node.js的机器上运行。

我通常有一些CSS文件:

一个用于重置和全局样式的“全局”CSS文件 “模块”特定的CSS文件用于逻辑分组的页面(可能是结帐向导或其他东西中的每个页面) 用于覆盖页面的“page”特定CSS文件(或者，将其放在单个页面的块中)

我真的不太关心CSS文件的多页请求。大多数人都有不错的带宽，我相信还有其他优化会比将所有样式组合到一个单独的CSS文件中产生更大的影响。在速度和可维护性之间进行权衡，我总是倾向于可维护性。YUI压缩机听起来很酷，但我可能要检查一下。

单个CSS文件的优点是传输效率高。每个HTTP请求意味着每个请求的文件都有一个HTTP头响应，这需要占用带宽。

我把我的CSS作为一个PHP文件，在HTTP头中带有“text/ CSS”mime类型。这样，我可以在服务器端拥有多个CSS文件，并在用户请求时使用PHP include将它们推入单个文件。每个现代浏览器都会接收包含CSS代码的.php文件，并将其作为. CSS文件处理。

我更喜欢多个CSS文件。这样就可以更容易地根据需要将“皮肤”换入和换出。单一文件的问题在于，它可能会失控，难以管理。如果你想要蓝色背景但又不想改变按钮怎么办?只要改变你的背景文件。等。

捆绑的样式表可以节省页面加载性能，但是样式越多，浏览器在页面上呈现动画的速度就越慢。这是由于大量未使用的样式可能不在您所在的页面上，但浏览器仍然需要计算。

参见:https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/

捆绑样式表的优点: -页面加载性能

捆绑样式表的缺点: -较慢的行为，这可能会导致滚动，互动，动画，

结论: 为了解决这两个问题，对于生产来说，理想的解决方案是将所有css捆绑到一个文件中保存在http请求中，但使用javascript从该文件中提取您所在页面的css并使用它更新头部。

为了了解每个页面需要哪些共享组件，并降低复杂性，最好声明这个特定页面使用的所有组件，例如:

<style href="global.css" rel="stylesheet"/>
<body data-shared-css-components="x,y,z">

推荐文章