css媒体查询，一个或多个用于移动优化

我知道，使用媒体查询作为移动第一方式应该会使网站在移动设备上运行得更快。我想知道使用大量媒体查询是否有区别，比如：

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

而不是对所有桌面样式使用一个大的，如下所示：

#first {}

@media screen and (min-width: 37.5em) {
    #first {}
}

#second {}

@media screen and (min-width: 37.5em) {
    #second {}
}

#first {}

#second {}

@media screen and (min-width: 37.5em) {
    #first {}

    #second {}
}

---

对于性能来说，哪一个更好，还是这很重要？我认为第一种方法在处理大量样式时更容易阅读。

它们都做相同的事情。唯一使第二种方法更好的事情是你没有重复自己。您正在保持代码干燥，所有内容都位于一个位置，以便处理该媒体查询。再加上每次重写@media screen都会让人头疼，而且很耗时。

没关系。在现实世界中，使用第二种方法。好的，听起来不错！我正在编辑wordpress主题，该主题与scss文件一起被分割成许多文件。因此，我认为在每个文件中至少使用一个媒体查询对我来说更清楚。我想在编译时最终会有很多查询。