18

我正在尝试学习编写更高效的 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，而这种做法与它背道而驰。任何见解将不胜感激。

4

2 回答 2

12

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

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

.spotlight ul li a

可以写成

.spotlight a

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

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

此外，使您的 CSS 结构与您的 HTML 结构相匹配会否定 CSS 的意义——如果 HTML 发生更改，您需要更改您的 CSS。所以你总是希望你的选择器尽可能不具体。

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

于 2012-12-23T18:41:24.343 回答
3

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

弯曲 BEM 规则

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

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

.header__nav {
  > ul {
    > li {
      > a {}
    }
  }
}
于 2014-02-06T11:30:08.440 回答