时间戳

首页 > 解决方案 > 哪个表现更好：更少的规则声明或更少的属性声明？

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

问题描述

在响应式 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);
    }
}

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

因此，第二种方法在现实世界场景中的性能是否可能明显更差？

标签： cssperformancebrowserresponsive

解决方案

嘿。在对页面应用一些媒体查询之前，让我们考虑一下第二种方法是如何工作的。它在整个页面上应用白色，然后在这两种特定情况下，一种与另一种相反，它应用其他样式。“过度”的 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;
  }
}

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

就像一个if/else. 你写了 if，因为 if 会覆盖默认属性，但你不写 else，因为默认值会保持不变，所以它不会被 if 覆盖

编辑

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

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

推荐阅读