CSS子选择器性能与类膨胀

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规则匹配过程,这意味着<a>上面最后一条CSS规则中的元素将首先匹配页面上的每个链接,从而导致性能下降.

因此,从我收集的内容来看,浏览器友好的解决方案将更具体,并使用,例如:

.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.所以你总是希望你的选择器尽可能不具体.

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