拥有一个包含几乎每个页面都要使用的样式元素的怪物.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
你见过用一种方法做和用另一种方法做有什么问题吗?
当前回答
像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文件。这样就可以更容易地根据需要将“皮肤”换入和换出。单一文件的问题在于,它可能会失控,难以管理。如果你想要蓝色背景但又不想改变按钮怎么办?只要改变你的背景文件。等。
这个问题很难回答。在我看来,这两种选择各有利弊。
我个人不喜欢阅读一个巨大的CSS文件,维护它是非常困难的。另一方面,分离它会导致额外的http请求,这可能会降低速度。
我的观点有两种。
1)如果你知道你的CSS一旦你构建了它就永远不会改变,我会在开发阶段构建多个CSS文件(为了可读性),然后在正式运行前手动组合它们(以减少http请求)
2)如果你知道你会偶尔改变你的CSS,并且需要保持它的可读性,我会构建单独的文件,并使用代码(如果你使用某种编程语言)在运行时构建时将它们组合起来(运行时缩小/组合是一个资源猪)。
无论是哪种选择,我都强烈建议在客户端进行缓存,以进一步减少http请求。
编辑: 我发现了这个博客,它展示了如何在运行时只使用代码就组合CSS。值得一看(尽管我自己还没有测试过)。
编辑2: 我决定在设计时使用单独的文件,并通过构建过程来缩小和合并。这样,我可以有单独的(可管理的)css,而我开发和一个适当的整体缩小文件在运行时。我仍然有我的静态文件和更少的系统开销,因为我没有在运行时进行压缩/缩小。
注意:对于你的购物者,我强烈建议使用捆绑器作为构建过程的一部分。无论您是从IDE内部构建,还是从构建脚本构建,捆绑器都可以通过包含的exe在Windows上执行,也可以在任何已经运行node.js的机器上运行。
捆绑的样式表可以节省页面加载性能,但是样式越多,浏览器在页面上呈现动画的速度就越慢。这是由于大量未使用的样式可能不在您所在的页面上,但浏览器仍然需要计算。
参见: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">
你想要两个世界。
您需要多个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。
你可以只使用一个css文件来提高性能,然后像这样注释掉部分:
/******** Header ************/
//some css here
/******* End Header *********/
/******** Footer ************/
//some css here
/******* End Footer *********/
etc