css - 只使用移动设备和桌面媒体查询更好，还是不使用任何定义的媒体查询更好？

Question

为了获得更好的性能，最好是这样:

#A {
 background: #000;
 border-radius: 10px;
}

@media (min-width: 1025px) {
#A{ 
  margin: 10px;
 }
}

@media (max-width: 1024px) {
 #A {
  margin: 200px;
 }
}

或者这个:

@media (min-width: 1025px) {
#A{ 
  background: #000;
  border-radius: 10px;
  margin: 10px;
 }
}

@media (max-width: 1024px) {
 #A {
  background: #000;
  border-radius: 10px;
  margin: 200px;
 }
}

我想了解根据屏幕尺寸，同时使用“通用”CSS(不在媒体查询内)是否比仅在媒体查询内使用 CSS 更好。

抱歉我的英文(和标题)...非常感谢! :)

Answer 1

第一个选项会更好。您仅更改跨媒体查询更改的属性，而不是重置所有属性。

重复样式会产生代码异味，并可能导致大规模的 CSS 无法维护。

您可以进一步优化并将其中一个边距设置为默认值，然后只有在遇到断点时才覆盖。

 #A {
   background: #000;
   border-radius: 10px;
   margin: 10px;
  }

  @media (max-width: 1024px) {
   #A {
    margin: 200px;
   }
  }