使用外部css网格工作是有益的，但加载时间非常紧张，尤其是断点媒体查询。 加载多个样式表有哪些优缺点，1个是主要的样式表，还有其他样式表，以适应该css网格布局的媒体查询断点？
如果这是一个好主意，那么这可能是优化css加载的下一个新标准。
Multiple Media Query Stylesheets
的实施例
这是一个正常的网格布局样式表示例
优点：工作良好且可靠，所有css都在一个位置
缺点：文件大小非常大，大量媒体查询块混乱
<link href="style.css" rel="stylesheet">
.col-md-6 {
width: 50%;
}
@media all and (max-width: 768px) {
.col-md-6 {
width: 100%;
}
}
以下是基于媒体查询的多个样式表的示例
优点：将代码分区，整理，可减少加载时间per Google's documentation
缺点： 不确定它们是什么，也许是浏览器支持，但这就是我需要帮助搞清楚
<link href="style.css" rel="stylesheet">
.col-md-6 {
width: 100%;
}
<link href="style-768.css" rel="stylesheet" media="all and (max-width: 768px)">
.col-md-6 {
width: 100%;
}
从我在Googles Developer docs上可以看出的一个仅在需要时加载的样式表（即最大宽度：768px），如果使用的话，它只被视为“渲染阻塞”。如果不使用它，则可以跳过整个样式表，并大大减少当时所需的css的初始负载。
这是一个好习惯吗？看起来像通过重新定位媒体查询块来削减css网格系统的2 / 3s有很大的好处，但也许这可以通过需要获得多个CSS文档的DOM来取消？