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

时间:2010-02-25 17:50:58

标签: css html stylesheet

拥有一个包含几乎每个页面都会使用的样式元素的怪物.css文件是否有任何优势?

我认为为了便于管理,我想将不同类型的CSS抽取到几个文件中,并且包含我的主<link />中的每个文件都那么糟糕?

我认为这样更好

  1. positions.css
  2. buttons.css
  3. tables.css
  4. copy.css
  5. VS

    1. 的site.css
    2. 你有没有看到任何与另一种方式相关的问题?

18 个答案:

答案 0 :(得分:141)

这是一个很难回答的问题。在我看来,这两种选择都有其优点和缺点。

我个人不喜欢通过单个HUGE CSS文件阅读,并且维护它非常困难。另一方面,将其拆分会导致额外的http请求,这可能会使事情变慢。

我的观点是两件事之一。

1)如果你知道你的CSS一旦构建就永远不会改变,我会在开发阶段构建多个CSS文件(为了便于阅读),然后在上线之前手动组合它们(以减少http请求) )

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

使用任一选项,我都强烈建议在客户端进行缓存,以进一步减少http请求。

修改
我发现这个blog显示了如何在运行时使用CSS而不是代码来组合CSS。值得一看(虽然我还没有自己测试过)。

编辑2:
我已经决定在我的设计时使用单独的文件,并建立一个缩小和组合的构建过程。这样,我可以在开发时使用单独的(可管理的)css,并在运行时使用正确的单片缩小文件。而且我仍然拥有静态文件和较少的系统开销,因为我没有在运行时进行压缩/缩小。

注意:对于那里的购物者,我强烈建议您使用bundler作为构建过程的一部分。无论您是在IDE中构建还是从构建脚本构建,都可以通过包含的exe在Windows上执行bundler,也可以在已运行node.js的任何计算机上运行。 < / p>

答案 1 :(得分:76)

像Sass或LESS这样的CSS编译器是一个很好的方法。这样你就可以为网站提供一个最小化的CSS文件(比普通的单个CSS源文件小得多,速度快得多),同时保持最好的开发环境,一切都整齐地分成组件。 / p>

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/

答案 2 :(得分:31)

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

答案 3 :(得分:13)

只有一个CSS文件更适合页面的加载时间,因为这意味着更少的HTTP请求。

有几个小的CSS文件意味着开发更容易(至少,我想是这样的:每个应用程序模块都有一个CSS文件可以让事情变得更容易)

所以,两种情况都有充分的理由......


一个可以让你充分利用这两个想法的解决方案是:

  • 使用几个小CSS文件进行开发
    • 即。更容易开发
  • 要为您的应用程序创建一个构建过程,将这些文件“合并”为一个
    • 那个构建过程也可以缩小那个大文件,btw
    • 这显然意味着您的应用程序必须具有一些配置,允许它从“多文件模式”切换到“单文件模式”。
  • 并且在生产中仅使用大文件
    • 即。更快的加载页面

还有一些软件在运行时组合CSS文件,而不是在构建时;但是在运行时这样做意味着要多吃一点CPU (并且显然需要一些缓存机制,而不是经常重新生成大文件)

答案 4 :(得分:13)

你想要两个世界。

你想要多个CSS文件,因为你的理智是一种可怕的浪费。

与此同时,拥有一个大型文件会更好。

解决方案是使用一些机制将多个文件合并到一个文件中。

一个例子就像是

<link rel="stylesheet" type="text/css" href="allcss.php?files=positions.css,buttons.css,copy.css" />

然后,allcss.php脚本处理连接文件并传递它们。

理想情况下,脚本会检查所有文件的mod日期,如果其中任何文件发生更改,则创建新的复合,然后返回该复合,然后检查If-Modified HTTP标头,以便不发送冗余CSS。

这为您提供了两全其美的体验。对JS也很有用。

答案 5 :(得分:11)

单片样式表确实提供了很多好处(在其他答案中有描述),但是根据样式表文档的整体大小,您可能会在IE中遇到问题。 IE对从单个文件中读取的选择器数量有限制。限制是4096选择器。如果你是单片样式表将有更多,你会想要拆分它。这种限制只会让它在IE中变得丑陋。

这适用于所有版本的IE。

请参阅Ross Bruniges BlogMSDN AddRule page

答案 6 :(得分:7)

有一个临界点,有一个以上的css文件是有益的。

一个拥有1M +页面的网站,普通用户可能只会看到5个页面,可能会有一个非常大比例的样式表,所以试图通过大量初始化来节省每页加载一个额外请求的开销下载是假经济。

将参数延伸到极限 - 这就像建议应该为整个网络维护一个大样式表。显然是荒谬的。

虽然每个网站的临界点都不同,但没有硬性规定。它取决于每页唯一css的数量,页数以及普通用户在使用网站时可能经常遇到的页数。

答案 7 :(得分:4)

我通常有一些CSS文件:

  • 用于重置和全局样式的“全局”css文件
  • “模块”特定的css文件,用于逻辑分组的页面(可能是结帐向导中的每个页面或其他内容)
  • “页面”页面上覆盖的特定css文件(或者将其放在单个页面的块中)

我并不太关心CSS文件的多个页面请求。大多数人拥有不错的带宽,我确信还有其他优化会比将所有样式组合成一个单一的CSS文件带来更大的影响。权衡在速度和可维护性之间,我总是倾向于可维护性。虽然YUI comperssor听起来很酷,但我可能要检查一下。

答案 8 :(得分:4)

也许看看compass,这是一个开源的CSS创作框架。 它基于Sass,因此它支持变量,嵌套,混合和导入等很酷的东西。如果你想保持单独的较小的CSS文件但是将它们自动组合成1(避免多次慢速HTTP调用),特别是导入很有用。 Compass为此添加了一组预定义的mixin,可以轻松处理跨浏览器的内容。 它是用Ruby编写的,但它可以很容易地与任何系统一起使用....

答案 9 :(得分:3)

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

然而,截至2018年3月,超过80%的浏览器现在支持HTTP2。 HTTP2允许浏览器同时下载多个资源,并且能够抢先推送资源。对所有页面使用单个CSS文件意味着大于必要的文件大小。通过适当的设计,除了更容易编码之外,我认为这样做没有任何优势。

HTTP2的理想设计是获得最佳性能: - 有一个核心CSS文件,其中包含所有页面使用的常用样式。 - 在单独的文件中具有特定于页面的CSS - 使用HTTP2推送CSS以最小化等待时间(cookie可用于防止重复推送) - 可选地在折叠CSS上方分开并首先推送它并稍后加载剩余的CSS(对于低带宽移动设备有用) - 如果您想加快未来的页面加载,您还可以在页面加载后为网站或特定页面加载剩余的CSS。

答案 10 :(得分:3)

我更喜欢多个CSS文件。这样,您可以更轻松地根据需要更换“皮肤”。一个整体文件的问题是它可能失控并且难以管理。如果你想要蓝色背景但又不想改变按钮怎么办?只需更改背景文件即可。等

答案 11 :(得分:2)

这是最好的方法:

  1. 使用所有共享代码创建通用css文件
  2. 将所有特定页面的css代码插入同一页面,标签上或使用每个页面的属性style =“”
  3. 通过这种方式,您只有一个包含所有共享代码和html页面的css。 顺便说一下(我知道这不是正确的话题)你也可以用base64对你的图像进行编码(但你也可以用你的js和css文件来编码)。通过这种方式,您可以将更多的http请求减少到1。

答案 12 :(得分:2)

SASS和LESS使这一切真的成为一个有争议的问题。开发人员可以设置有效的组件文件,并在编译时将它们全部组合。在SASS中,您可以在开发过程中关闭压缩模式以便于阅读,并将其重新打开以进行生产。

http://sass-lang.com http://lesscss.org

最后,无论您使用何种技术,都可以使用单个缩小的CSS文件。更少的CSS,更少的HTTP请求,更少的服务器需求。

答案 13 :(得分:1)

我正在使用Jammit来处理我的css文件,并使用许多不同的文件来提高可读性。 Jammit doest在生产中部署之前组合和压缩文件的所有肮脏工作。 这样,我开发了很多文件,但生产中只有一个文件。

答案 14 :(得分:1)

你可以只使用一个css文件来提高性能,然后注释掉这样的部分:

/******** Header ************/
//some css here

/******* End Header *********/


/******** Footer ************/
//some css here

/******* End Footer *********/

答案 15 :(得分:1)

单个CSS文件的优点是传输效率。每个HTTP请求表示请求的每个文件的HTTP头响应,并且占用带宽。

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

答案 16 :(得分:0)

我已经为CSS开发创建了一个系统的方法。这样我就可以使用永不改变的标准。首先,我开始使用960网格系统。然后我为基本布局,边距,填充,字体和大小创建了单行css。然后我根据需要将它们串在一起。这允许我在所有项目中保持一致的布局,并反复使用相同的css文件。因为它们不具体。这是一个例子:---- div class =“c12 bg0 m10 p5 white fl”/ div ---这意味着容器是12列横跨,利用bg0有10px填充的边距为5的文本是白色的它浮动剩下。我可以通过删除或添加一个新的 - 我称之为“轻”风格来轻松改变这一点 - 而不是创建具有所有这些属性的单个类;在编写页面时,我只是将单个样式组合在一起。这允许我创建任何样式组合,并不限制我的创造力或使我创建大量相似的样式。您的样式表变得更易于管理,最小化并允许您一遍又一遍地重复使用它。我发现这种方法非常适合快速设计。我也不再在PSD中设计第一,但在浏览器中也节省了时间。另外,因为我还为我的背景和页面设计属性创建了一个命名系统,我只需在创建一个新项目时更改我的图像文件。(bg0 =根据我的命名系统的身体背景)这意味着如果我以前有一个白色一个项目的背景简单地将其改为黑色只是意味着在下一个项目中bg0将是黑色背景或另一个图像.....我还没有发现这个方法有什么问题,它似乎工作得很好。

答案 17 :(得分:0)

捆绑的样式表可能会保存页面加载性能,但浏览器在您所在页面上呈现动画的速度越慢。这是因为您所在的页面上可能没有大量未使用的样式,但浏览器仍需要计算。

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

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

捆绑的样式表缺点: - 较慢的行为,在滚动,交互性,动画,

期间可能导致波动

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

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

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