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

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

我已经阅读了无数主题和帖子，但对此没有最终公式。

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

Answer 1

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

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

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