CSS多次执行一个规则答案

【问题标题】：CSS multiple execution of a ruleCSS多次执行一个规则
【发布时间】：2018-07-22 16:51:35
【问题描述】：

在下面的示例中，我想以相同的样式可视化元素的两种状态。无论它处于“foo”还是“bar”状态，该元素都应该看起来相同。也有可能元素同时具有两种状态

<div id="elem" foo bar></div>

CSS 样式

#elem {
  width: 100px;
  height: 100px;
  background-color: red;
}

#elem[foo],
#elem[bar] {
  opacity: 0.5;
}

在此示例中，如果设置了 foo 和 bar 属性，则为同一元素选择了两次规则。有没有更好的方法，或者可能是性能或可视化问题？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

CSS 被告知要慢。它适用于称为回流/重绘的现象。它在较小程度上适用于选择器效率。许多具有相同样式属性的选择器被连续应用是一个特定的实际案例。让我们深入研究一下。

例如，你有一个元素：

<p class="first">Lorem ipsum</p>

然后你添加另一个类，这样它就变成了

<p class="first second">Lorem ipsum</p>

现在，假设“lead”和“first”类具有相同的属性：

.first,
.second {
  color: green;
}

当“second”类应用于特定的“p”元素时，浏览器肯定会应用新的 CSS 规则，然后计算差异；因为没有区别，浏览器不会重绘。如果您使用 Chrome DevTools（性能选项卡）来跟踪实际发生的情况，则实际上每秒绘制 0 帧，尽管“重新计算样式”操作会花费几微秒。

假设我们删除了一个类并将其带回

<p class="first">Lorem ipsum</p>

仍然没有重绘。

但是现在，让我们介绍另一个具有不同属性的类：

.third {
  color: blue;
}

并将这个类添加到我们的“p”中：

<p class="first second third">Lorem ipsum</p>

这种情况下，“p”的“color”样式属性会发生变化，导致重绘。在 iPhone 7 (Safari) 上，以 208fps 的速率执行此操作总共需要 4.8 毫秒。延迟非常低，但是，根据要更改的样式集，性能可能会有所不同。

所以，是的，CSS 中应用相同样式属性的多一条规则会导致多一次检查，这实际上需要时间，但这个时间可以忽略不计。我很确定您还有更重要的事情需要优化。

为了进一步阅读，有一个很好的渲染性能教程值得一读，Reduce the Scope and Complexity of Style Calculations。

【讨论】：