CSS媒体查询展示位置

Question

对于每个项目，我的媒体查询都以统一的方式遵循主要的CSS样式，如下所示：

/* CSS styles */
/* CSS styles */
/* CSS styles */

/* Media queries */
/* Media queries */
/* Media queries */

目前我正在使用SASS，而且我有很多偏见，所以我想 - 为什么不直接在每个部分放置媒体查询，节省时间来搜索我以前的放置决定。

意思是，我想使用我的SASS（scss）中的以下CSS输出：

/* CSS Styles */
/* Media queries for the above CSS*/

/* CSS Styles */
/* Media queries for the above CSS*/

/* CSS Styles */
/* Media queries for the above CSS*/

这会影响性能吗？从我的观点来看，这实际上会使过程更快，例如＆GT;你有这个课程，这些是反应灵敏的风格 - 瞧。

我已经阅读了很多帖子和帖子，但是没有最终公式。

这是一个好习惯，如果不是 - 为什么？

Answer 1

根据this question，CSS代码的顺序无关紧要，因为浏览器需要解析整个CSS文件才能开始渲染过程。

如果您担心性能，首先应该查看其他内容，例如JavaScript代码（如果有）以及您正在使用的CSS规则数量。您也可以尝试缩小和/或压缩（使用Gzip）您的代码（假设您尚未完成此操作）。

作为最后的答案，我会说只需将代码放在最适合您的地方，我会选择第二种方法，因为我认为这会让代码更容易理解，但这只是我的意见。