html – CSS子选择器性能与类膨胀

我正在努力学习编写更有效的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，而这种反对它。任何见解将不胜感激。

解决方法

你必须权衡它。向每个锚点添加一个类是可笑的，HTML中的额外的膨胀会大大抵消保存的渲染时间(这将是蜜蜂腿的1/10)。更不用说你的代码将会维持多久。

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

.spotlight ul li a

可以写成

.spotlight a

如果您继续在HTML中的相同元素上指定单个类(如第二个示例)，则可能会更好地使用标签选择器。

你也必须权衡你的时间与浏览器的时间。在每个页面的加载上，节省几纳秒的时间花费多少？说实话，这不是真的值得。

此外，使您的CSS结构与您的HTML结构匹配否定了CSS – 如果HTML更改，则需要更改CSS。所以你总是希望你的选择器尽可能不具体。

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