哪个表现更好：更少的规则声明或更少的属性声明？

Question

在响应式 CSS 的示例中，常见的做法是将一个 UI 布局完全声明为“默认”布局（即不在媒体查询中），然后媒体查询添加属性和/或 覆盖这些属性以创建不同的布局/外观。

像这样：

/**** Small screen layout: ****/

.toolbar {
    background-color: #000;
    width: 100%;                  /**** Declared here for the default layout ****/
    position: absolute;           /**** Declared here for the default layout ****/
}

/**** Large screen layout: ****/

@media (min-width: 500px) 
{
    .toolbar {
        position: relative;       /**** Declared again, just to 'remove' it ****/
        width: auto;              /**** Declared again, just to 'remove' it ****/
        border-radius: 5px;
        box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
    }
}

我想这样做：只在媒体查询之外声明公共属性

/**** Common properties ****/

.toolbar {
    background-color: #000;
}

/**** Small-screen-only properties: ****/

@media (max-width: 499px) 
{
    .toolbar {
        width: 100%;            /**** Only declared once, where required ****/
        position: absolute;     /**** Only declared once, where required ****/
    }
}

/**** Large-screen-only properties: ****/

@media (min-width: 500px) 
{
    .toolbar {
        border-radius: 5px;
        box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
    }
}

我想使用第二种方法，因为我更喜欢这样工作，但它有更多选择器供浏览器解析。

因此，第二种方法在实际场景中的性能是否会明显更差？

Answer 1

嘿嘿。在对页面应用一些媒体查询之前，让我们考虑一下第二种方法是如何工作的。 它在整个页面上应用白色，然后在这两种特定情况下，一种与另一种相反，它应用其他样式。 “过度”的 CSS 也是如此，因为在这种情况下，如果不应用第一个媒体查询规则，则第二个会。

我建议你做的是建立一个一般规则，不要围绕它进行任何查询。然后，设置特定的查询

所以最后（下面的示例）最好这样做

.element{
  width:100px;
  height:auto;
  color:#fff;
}

@media (min-width: 500px) 
{
  .element{
    width:200px;
    height:100px;
    color:#000;
  }
}

而不是这个

@media (max-width: 499px) 
{
  .element{
    width:100px;
    height:auto;
    color:#fff;
  }
}

@media (min-width: 500px) 
{
  .element{
    width:200px;
    height:100px;
    color:#000;
  }
}

当您有多个查询需要担心时，只需写下您真正需要的内容。不要过度查询，例如 2 个查询 1 个案例

就像if/else。你写 if，因为 if 会覆盖默认属性，但你不写 else，因为默认会保持不变，所以不会被 if 覆盖

编辑

在上面写的所有可能的混乱中。简而言之，最好使用一个默认样式来应用，即没有任何查询或条件。然后，将编辑其行为的其他查询将写在其下方。

所以我写的第一个例子是最有效、最简单和最好的，对于任何规模的性能影响也是如此。另外，我强烈建议仅使用@media 查询与max-widthattributes，因为它们的目的是基于较低宽度的设备来缩放网页