拥有一个包含几乎每个页面都要使用的样式元素的怪物.css文件有什么好处吗?
我在想,为了便于管理,我想把不同类型的CSS拉出到几个文件中,并包括我的主<link />是坏的吗?
我觉得这样更好
positions.css buttons.css tables.css copy.css
vs.
site.css
你见过用一种方法做和用另一种方法做有什么问题吗?
拥有一个包含几乎每个页面都要使用的样式元素的怪物.css文件有什么好处吗?
我在想,为了便于管理,我想把不同类型的CSS拉出到几个文件中,并包括我的主<link />是坏的吗?
我觉得这样更好
positions.css buttons.css tables.css copy.css
vs.
site.css
你见过用一种方法做和用另一种方法做有什么问题吗?
当前回答
也许可以看看compass,这是一个开源的CSS创作框架。 它基于Sass,所以它支持一些很酷的东西,比如变量、嵌套、mixin和导入。如果您想要保持独立的较小CSS文件,但将它们自动合并为一个(避免多次缓慢的HTTP调用),则导入非常有用。 Compass在此基础上增加了一组预定义的mixin,便于处理跨浏览器的东西。 它是用Ruby编写的,但是它可以很容易地用于任何系统....
其他回答
这个问题很难回答。在我看来,这两种选择各有利弊。
我个人不喜欢阅读一个巨大的CSS文件,维护它是非常困难的。另一方面,分离它会导致额外的http请求,这可能会降低速度。
我的观点有两种。
1)如果你知道你的CSS一旦你构建了它就永远不会改变,我会在开发阶段构建多个CSS文件(为了可读性),然后在正式运行前手动组合它们(以减少http请求)
2)如果你知道你会偶尔改变你的CSS,并且需要保持它的可读性,我会构建单独的文件,并使用代码(如果你使用某种编程语言)在运行时构建时将它们组合起来(运行时缩小/组合是一个资源猪)。
无论是哪种选择,我都强烈建议在客户端进行缓存,以进一步减少http请求。
编辑: 我发现了这个博客,它展示了如何在运行时只使用代码就组合CSS。值得一看(尽管我自己还没有测试过)。
编辑2: 我决定在设计时使用单独的文件,并通过构建过程来缩小和合并。这样,我可以有单独的(可管理的)css,而我开发和一个适当的整体缩小文件在运行时。我仍然有我的静态文件和更少的系统开销,因为我没有在运行时进行压缩/缩小。
注意:对于你的购物者,我强烈建议使用捆绑器作为构建过程的一部分。无论您是从IDE内部构建,还是从构建脚本构建,捆绑器都可以通过包含的exe在Windows上执行,也可以在任何已经运行node.js的机器上运行。
像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/
对于页面的加载时间来说,只有一个CSS文件更好,因为这意味着更少的HTTP请求。
拥有几个小的CSS文件意味着开发更容易(至少,我是这么认为的:应用程序的每个模块拥有一个CSS文件会让事情变得更容易)。
所以,这两种情况都有很好的理由……
一个可以让你得到两个想法的最好的解决方案是:
使用几个小的CSS文件进行开发 也就是更容易发展 要为您的应用程序建立一个构建过程,将这些文件“组合”成一个文件 顺便说一句,这个构建过程也可以缩小那个大文件 这显然意味着你的应用程序必须有一些配置,允许它从“多文件模式”切换到“单文件模式”。 而要在生产中使用,只有大文件 即更快的加载页面
也有一些软件可以在运行时组合CSS文件,而不是在构建时;但是在运行时这样做意味着消耗更多的CPU(并且显然需要一些缓存机制,以避免太频繁地重新生成大文件)
从历史上看,使用单个CSS文件的主要优势之一是使用HTTP1.1时的速度优势。
然而,截至2018年3月,超过80%的浏览器现在支持HTTP2,它允许浏览器同时下载多个资源,以及能够预先推送资源。为所有页面使用一个CSS文件意味着文件大小大于所需大小。有了适当的设计,我不认为这样做有任何好处,除了更容易编码。
HTTP2的最佳性能的理想设计是:
有一个核心CSS文件,其中包含所有页面使用的常用样式。 有页面特定的CSS在一个单独的文件 使用HTTP2推送CSS来最小化等待时间(可以使用cookie来防止重复推送) 可选地在折叠CSS上面分开,先推这个,然后再加载剩下的CSS(适用于低带宽移动设备) 如果您想加快未来的页面加载速度,还可以在页面加载后加载站点或特定页面的剩余CSS。
我使用Jammit来处理我的css文件,并使用许多不同的文件来提高可读性。 在部署到生产环境之前,Jammit完成了所有合并和压缩文件的繁琐工作。 这样,我有许多文件在开发中,但只有一个文件在生产中。