拥有一个包含几乎每个页面都要使用的样式元素的怪物.css文件有什么好处吗?
我在想，为了便于管理，我想把不同类型的CSS拉出到几个文件中，并包括我的主<link />是坏的吗?
我觉得这样更好
positions.css buttons.css tables.css copy.css
vs.
site.css
你见过用一种方法做和用另一种方法做有什么问题吗?
当前回答
捆绑的样式表可以节省页面加载性能，但是样式越多，浏览器在页面上呈现动画的速度就越慢。这是由于大量未使用的样式可能不在您所在的页面上，但浏览器仍然需要计算。
参见: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">
其他回答
SASS和LESS使这一切都成为一个有争议的问题。开发人员可以建立有效的组件文件，并在编译时将它们全部组合起来。在SASS中，您可以在开发过程中关闭压缩模式以方便阅读，并在生产过程中切换回来。
http://sass-lang.com http://lesscss.org
最后，不管你使用什么技术，一个简化的CSS文件就是你想要的。更少的CSS，更少的HTTP请求，更少的服务器需求。
存在一个临界点，在这个临界点上使用多个css文件是有益的。
一个拥有100万以上页面的网站，平均用户可能只看到其中的5个，可能有一个巨大的样式表，所以试图通过大量的初始下载来节省每次页面加载的单个额外请求的开销是虚假的经济。
把这个论点延伸到极致——这就像是建议整个网络应该维护一个大的样式表。显然是荒谬的。
每个网站的临界点都不一样，所以没有硬性规定。这将取决于每个页面的唯一css数量、页面数量以及普通用户在使用网站时可能经常遇到的页面数量。
对于页面的加载时间来说，只有一个CSS文件更好，因为这意味着更少的HTTP请求。
拥有几个小的CSS文件意味着开发更容易(至少，我是这么认为的:应用程序的每个模块拥有一个CSS文件会让事情变得更容易)。
所以，这两种情况都有很好的理由……
一个可以让你得到两个想法的最好的解决方案是:
使用几个小的CSS文件进行开发 也就是更容易发展 要为您的应用程序建立一个构建过程，将这些文件“组合”成一个文件 顺便说一句，这个构建过程也可以缩小那个大文件 这显然意味着你的应用程序必须有一些配置，允许它从“多文件模式”切换到“单文件模式”。 而要在生产中使用，只有大文件 即更快的加载页面
也有一些软件可以在运行时组合CSS文件，而不是在构建时;但是在运行时这样做意味着消耗更多的CPU(并且显然需要一些缓存机制，以避免太频繁地重新生成大文件)
这个问题很难回答。在我看来，这两种选择各有利弊。
我个人不喜欢阅读一个巨大的CSS文件，维护它是非常困难的。另一方面，分离它会导致额外的http请求，这可能会降低速度。
我的观点有两种。
1)如果你知道你的CSS一旦你构建了它就永远不会改变，我会在开发阶段构建多个CSS文件(为了可读性)，然后在正式运行前手动组合它们(以减少http请求)
2)如果你知道你会偶尔改变你的CSS，并且需要保持它的可读性，我会构建单独的文件，并使用代码(如果你使用某种编程语言)在运行时构建时将它们组合起来(运行时缩小/组合是一个资源猪)。
无论是哪种选择，我都强烈建议在客户端进行缓存，以进一步减少http请求。
编辑: 我发现了这个博客，它展示了如何在运行时只使用代码就组合CSS。值得一看(尽管我自己还没有测试过)。
编辑2: 我决定在设计时使用单独的文件，并通过构建过程来缩小和合并。这样，我可以有单独的(可管理的)css，而我开发和一个适当的整体缩小文件在运行时。我仍然有我的静态文件和更少的系统开销，因为我没有在运行时进行压缩/缩小。
注意:对于你的购物者，我强烈建议使用捆绑器作为构建过程的一部分。无论您是从IDE内部构建，还是从构建脚本构建，捆绑器都可以通过包含的exe在Windows上执行，也可以在任何已经运行node.js的机器上运行。
单个CSS文件的优点是传输效率高。每个HTTP请求意味着每个请求的文件都有一个HTTP头响应，这需要占用带宽。
我把我的CSS作为一个PHP文件，在HTTP头中带有“text/ CSS”mime类型。这样，我可以在服务器端拥有多个CSS文件，并在用户请求时使用PHP include将它们推入单个文件。每个现代浏览器都会接收包含CSS代码的.php文件，并将其作为. CSS文件处理。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
