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

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

我觉得这样更好

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

vs.

site.css

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


当前回答

我使用Jammit来处理我的css文件,并使用许多不同的文件来提高可读性。 在部署到生产环境之前,Jammit完成了所有合并和压缩文件的繁琐工作。 这样,我有许多文件在开发中,但只有一个文件在生产中。

其他回答

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

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

这适用于所有版本的IE。

参见Ross Bruniges博客和MSDN AddRule页面。

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

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

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


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

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

etc

SASS和LESS使这一切都成为一个有争议的问题。开发人员可以建立有效的组件文件,并在编译时将它们全部组合起来。在SASS中,您可以在开发过程中关闭压缩模式以方便阅读,并在生产过程中切换回来。

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

最后,不管你使用什么技术,一个简化的CSS文件就是你想要的。更少的CSS,更少的HTTP请求,更少的服务器需求。

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

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