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

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

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

我觉得这样更好

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

vs.

site.css

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

当前回答

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

2010-02-25 17:54:15

其他回答

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

2010-02-25 17:58:13

我通常有一些CSS文件:

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

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

2010-05-06 15:57:23

从历史上看，使用单个CSS文件的主要优势之一是使用HTTP1.1时的速度优势。

然而，截至2018年3月，超过80%的浏览器现在支持HTTP2，它允许浏览器同时下载多个资源，以及能够预先推送资源。为所有页面使用一个CSS文件意味着文件大小大于所需大小。有了适当的设计，我不认为这样做有任何好处，除了更容易编码。

HTTP2的最佳性能的理想设计是:

有一个核心CSS文件，其中包含所有页面使用的常用样式。有页面特定的CSS在一个单独的文件使用HTTP2推送CSS来最小化等待时间(可以使用cookie来防止重复推送) 可选地在折叠CSS上面分开，先推这个，然后再加载剩下的CSS(适用于低带宽移动设备) 如果您想加快未来的页面加载速度，还可以在页面加载后加载站点或特定页面的剩余CSS。

2018-03-21 02:48:33

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

参见: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">

2016-10-21 07:26:19

像Sass或LESS这样的CSS编译器是一个很好的方法。通过这种方式，你可以为网站交付一个最小化的CSS文件(这将比普通的单个CSS源文件小得多，速度也快得多)，同时保持最好的开发环境，所有东西都整齐地分割成组件。

Sass和LESS具有变量、嵌套和其他方法的附加优势，使CSS更容易编写和维护。强烈推荐。我个人现在使用Sass (SCSS语法)，但以前使用LESS。两者都很棒，好处相似。一旦你用编译器编写了CSS，你就不太可能不需要编译器。

http://lesscss.org

http://sass-lang.com

如果你不想在Ruby上浪费时间，这个Mac版的LESS编译器非常棒:

http://incident57.com/less/

或者你可以使用CodeKit(同样的人):

http://incident57.com/codekit/

WinLess是一个用于编译LESS的Windows GUI

http://winless.org/

2012-09-20 10:51:35

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

推荐文章

最新文章

标签