Question

我正在努力学习编写更高效的CSS，特别是当我正在使用一个需要快速渲染的相当复杂的网站时。

我习惯在HTML / CSS中使用很多（主要是因为我喜欢可读性）：

.spotlight {}
.spotlight ul {}
.spotlight ul li {}
.spotlight ul li a {color: #333;}

<div class="spotlight">
  <ul>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
  </ul>
</div>

我现在明白浏览器从右到左运行CSS规则匹配过程，这意味着上面最后一条CSS规则中的<a>元素将首先匹配页面上的每个链接，从而导致性能下降。

因此，根据我收集的内容，浏览器友好的解决方案将更具体，并使用，例如：

.spotlight {}
.spotlight-link {color: #333;}

    <div class="spotlight">
      <ul>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
        <li><a class="spotlight-link" href="">link</a></li>
      </ul>
    </div>

（假设我在可能的情况下使用继承但通常仍然需要对树中的最后一个元素进行特定控制）

让我怀疑的是：在整个页面中的元素上打印类名称的所有额外HTML膨胀是否都会抵消避免嵌套CSS子选择器所带来的性能提升？我习惯于尝试编写更少的HTML，这种情况与之相反。任何见解都将不胜感激。

Answer 1

你必须权衡它。为每个锚添加一个类是荒谬的，HTML中的额外膨胀会大大抵消保存的渲染时间（这将是蜜蜂腿的1 / 10,000）。更不用说你的代码维护会有多难。

您只需要停止使用不必要的昂贵的选择器，例如

.spotlight ul li a

可以写成

.spotlight a

如果您继续在HTML中的相同元素上指定单个类（如第二个示例），则最好使用标记选择器。

您还必须权衡您的时间与浏览器时间。在每页加载时节省几纳秒的时间需要多少钱？老实说，这不是真的值得的。

此外，使CSS结构与HTML结构相匹配否定了CSS的要点 - 如果HTML发生变化，则需要更改CSS。因此，始终希望您的选择器尽可能不具体。

但这里没有正确或错误的答案。

Answer 2

我认为，最好的权衡是将子组合>用于重复多次的元素，并在事物开始变得太嵌套时使用类。

Bending the Rules of BEM

我认为，考虑到我们的选择，上述文章达到了完美的平衡。

使用SCSS，现在应该是强制性的，我的导航菜单通常看起来像这样（这绝对是我将要嵌套的东西）：

.header__nav {
  > ul {
    > li {
      > a {}
    }
  }
}

CSS子选择器性能与类膨胀

2 个答案: