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*/

这会影响性能吗？从我的角度来看，这实际上会在某种程度上使过程更快，例如> 你有这个类，这些是响应式样式 - 瞧。

我已经阅读了许多主题和帖子，但没有最终公式。

这是一个好的做法吗？如果不是，为什么？

Answer 1

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

如果您担心性能，您应该先查看其他内容，例如您的 JavaScript 代码（如果有）和您使用的 CSS 规则的数量。您还可以尝试缩小和/或压缩（使用 Gzip）您的代码（假设您还没有这样做）。

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