CSS 媒体查询 - 顺序很重要吗？

现在我经常使用 CSS 媒体查询，我想知道最好按什么顺序使用它们。

Method 1

@media only screen and (min-width: 800px) {
    #content { ... }
    #sidebar { ... }
}
@media only screen and (max-width: 799px) {
    #content { ... }
    #sidebar { ... }
}

像这样，显然代码更短，但由于有大量 CSS，您最终会将一个容器的 CSS 分散到样式表中的多个位置。

Method 2

@media only screen and (min-width: 800px) {
    #content { ... }
}
@media only screen and (max-width: 799px) {
    #content { ... }        
}
@media only screen and (min-width: 800px) {
    #sidebar { ... }
}
@media only screen and (max-width: 799px) {
    #sidebar { ... }
}

像这样，如果您为每个新容器指定屏幕尺寸（CSS 处于活动状态），我认为概述要好得多。 但对于大量 CSS，您将使用 @media 查询数十次。

第二种方法是否会导致加载时间明显延长或有其他缺点？

EDIT:

可能是我表达得不够清楚。我的问题并不真正涉及顺序或查询本身，也不涉及覆盖 CSS 声明。 我想知道的是其他人如何将媒体查询“语句”包含到他们的 CSS 中的规范。

假设我只有一个断点，可以切换一些 CSS。 因此，我有一个媒体查询的最小值：800px，第二个媒体查询的最大值：799px。

我应该使用两个查询“语句”吗

@media only screen and (min-width: 800px) { ... }
@media only sreen and (max-width: 799px) { ... }

在我的整个样式表中只包含一次并将所有容器的所有 CSS 包含到两个媒体查询“语句”中？ 或者多次使用媒体查询“语句”也可以吗？

我的意思是，如果对多次使用媒体查询“语句”的方法有任何疑问（再次针对页面的每个部分），则不要在样式表中创建两个单独的区域（一个用于上面的 CSS，一个用于低于 800 像素的区域） ，比如内容、小部件等，使它们具有响应能力）？
我只想在样式表的两个不同部分中使用 800 像素以上和以下的 CSS。

我知道ofc这两种方法都有效，我只是对规范感到好奇，如果在CSS表中使用媒体查询“语句”数十次或数百次（而不是我提到的情况下仅两次）会增加负载次？

My answer关于如何使用媒体查询可以应用于您的问题：

这是你应该如何使用媒体查询:

请记住使用您喜欢/需要的尺寸。以下仅用于演示 目的。

非移动优先方法 using max-width:

/*==========  Non-Mobile First Method  ==========*/

    @media only screen and (max-width: 960px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 768px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (max-width: 480px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (max-width: 320px) {
      /*your CSS Rules*/ 
    }

移动优先方法 using min-width:

/*==========  Mobile First Method  ==========*/
 
    @media only screen and (min-width: 320px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 480px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 640px) {
      /*your CSS Rules*/     
    }
    @media only screen and (min-width: 768px) {
      /*your CSS Rules*/     
    }       
    @media only screen and (min-width: 960px) {
      /*your CSS Rules*/ 
    }

这里有一个好的tutorial来自 W3.org

根据您最后的评论，我可以给您的答案将是明智的，所以我能为您做的最好的事情就是给您提供几篇文章，以便您可以对这个主题有自己的看法：

多少媒体查询才算太多？

Web 性能：一个或数千个媒体查询？

揭穿响应式 CSS 性能神话