Css 对不同的元素或不同的宽度进行多个媒体查询更好吗？

我正在创建一个响应性网站，目前正在进行一些媒体查询。我边写边写，比如：

.status-reply-disabled {
color: #B1B1B1;
font-size: 14px;
margin-top: 10px;
position: absolute;
margin-left: 65px;  
}

@media screen and (max-width: 600px) {
    .status-reply-disabled {
        font-size: 10px;
        margin-left: 35px;  
    }
}

然后过一会儿我会有这样的东西：

.status-reply-avatar {
border: 1px solid #d8d8d8;  
width: 45px;
border-radius: 50%;
position: absolute;
}

@media screen and (max-width: 600px) {
    .status-reply-avatar {
        display:none;   
    }
}

就处理时间而言，将所有媒体查询（比如600px）放在一个大查询中会更好吗？像这样：

@media screen and (max-width: 600px) {
    .status-reply-avatar {
        display:none;   
    }
    .status-reply-disabled {
        font-size: 10px;
        margin-left: 35px;  
    }

    ...

    All other styles for this width

    ...

}

---

或者我做的很好吗？

当然，把你的代码放在一个媒体查询中，它会做同样的事情，你会写更少的代码行，你会遵循干燥的原则（不要重复你自己）

---

如果在一个文件中定义同一个媒体查询两次，这不是一个很好的做法…

尝试将所有代码放在一个特定的查询下，例如max width=600px。这对于干净的语义代码来说更好。从桌面转到更窄的手机屏幕，比如400px左右。总是更好。如果你在一周左右后再来，你会感到困惑的。先宽后窄。如果仍然没有进行900px停止，则不要为max width=600px的元素编码。

没有任何区别。在组织方面，您可以像以前一样编写代码，并将代码组织成多个部分，或者仅为媒体查询创建另一个CSS文件。

如果您没有大量代码，那么性能就无关紧要了。最近我更喜欢编写几个媒体查询，总是接近某个特定元素的一般规则，只是为了保持对事物的控制（比如前两个代码块）。我其实更喜欢这个。在速度方面，如果没有太大的区别