拥有一个包含几乎每个页面都要使用的样式元素的怪物.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">
其他回答
你可以只使用一个css文件来提高性能，然后像这样注释掉部分:
/******** Header ************/
//some css here
/******* End Header *********/
/******** Footer ************/
//some css here
/******* End Footer *********/
etc
对于页面的加载时间来说，只有一个CSS文件更好，因为这意味着更少的HTTP请求。
拥有几个小的CSS文件意味着开发更容易(至少，我是这么认为的:应用程序的每个模块拥有一个CSS文件会让事情变得更容易)。
所以，这两种情况都有很好的理由……
一个可以让你得到两个想法的最好的解决方案是:
使用几个小的CSS文件进行开发 也就是更容易发展 要为您的应用程序建立一个构建过程，将这些文件“组合”成一个文件 顺便说一句，这个构建过程也可以缩小那个大文件 这显然意味着你的应用程序必须有一些配置，允许它从“多文件模式”切换到“单文件模式”。 而要在生产中使用，只有大文件 即更快的加载页面
也有一些软件可以在运行时组合CSS文件，而不是在构建时;但是在运行时这样做意味着消耗更多的CPU(并且显然需要一些缓存机制，以避免太频繁地重新生成大文件)
也许可以看看compass，这是一个开源的CSS创作框架。 它基于Sass，所以它支持一些很酷的东西，比如变量、嵌套、mixin和导入。如果您想要保持独立的较小CSS文件，但将它们自动合并为一个(避免多次缓慢的HTTP调用)，则导入非常有用。 Compass在此基础上增加了一组预定义的mixin，便于处理跨浏览器的东西。 它是用Ruby编写的，但是它可以很容易地用于任何系统....
从历史上看，使用单个CSS文件的主要优势之一是使用HTTP1.1时的速度优势。
然而，截至2018年3月，超过80%的浏览器现在支持HTTP2，它允许浏览器同时下载多个资源，以及能够预先推送资源。为所有页面使用一个CSS文件意味着文件大小大于所需大小。有了适当的设计，我不认为这样做有任何好处，除了更容易编码。
HTTP2的最佳性能的理想设计是:
有一个核心CSS文件，其中包含所有页面使用的常用样式。 有页面特定的CSS在一个单独的文件 使用HTTP2推送CSS来最小化等待时间(可以使用cookie来防止重复推送) 可选地在折叠CSS上面分开，先推这个，然后再加载剩下的CSS(适用于低带宽移动设备) 如果您想加快未来的页面加载速度，还可以在页面加载后加载站点或特定页面的剩余CSS。
单个CSS文件的优点是传输效率高。每个HTTP请求意味着每个请求的文件都有一个HTTP头响应，这需要占用带宽。
我把我的CSS作为一个PHP文件，在HTTP头中带有“text/ CSS”mime类型。这样，我可以在服务器端拥有多个CSS文件，并在用户请求时使用PHP include将它们推入单个文件。每个现代浏览器都会接收包含CSS代码的.php文件，并将其作为. CSS文件处理。
推荐文章
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
- 如何删除和清除所有的本地存储数据
- 设备像素比到底是什么?
- 我如何做一个半透明的背景?
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在CSS网格布局中等高行
- $(window).width()与媒体查询不一样
- 在HTML中还有其他有用的空格码吗，比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击
- 如何以及在哪里使用::ng-deep?
- Angular 2模板中的标签是什么意思?
