[译] 从没有人告诉过个人 CSS 小知识

• 原文地址：Things nobody ever taught me about CSS.
• 原文做者：Charlie Gerard
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Xuyuey
• 校对者：Fengziyin1234, xionglong58

这篇文章绝对不是对任何一个曾经和我共事过的人的批判，仅仅是我最近在作一些我的研究的时候学到的关于 CSS 的一些要点。

---

有不少开发者并不怎么关注 CSS，我想这已经不是什么新鲜事了。经过网上的各类对话，或者与朋友和同事聊天的时候你均可以观察到这个现象。

---

然而，在社区中，咱们学到的不少知识都是来自于同伴的分享，有时我会意识到不少关于 CSS 的基础知识在社区中历来没有被分享过，由于其余人历来不肯意花时间在 CSS 上深究。

为了解决这个问题，我决定对 CSS 作一些研究并整理出一部分概念，我认为这些概念对于更好地理解和编写 CSS 代码颇有帮助。

这份清单确定没有那么全面，它只包含了过去几天我学到的新知识，分享出来但愿可以帮助到你们。

术语

在全部的编程语言中都有一些用来描述概念的特定术语。CSS 做为一门编程语言也是同样的，了解这些术语对于沟通交流甚至只是为了提升本身的知识储备都是颇有帮助的。

后代选择器

你知道样式选择器中间的小空格吗？它实际上还有一个名字，它的名字是后代选择器。

布局，绘制和渲染层合并

这些术语更多地和浏览器渲染有关，但它仍然很重要，由于一些 CSS 属性会影响渲染进程的不一样步骤。

1. 布局

布局步骤负责计算元素在屏幕上占用的空间大小。修改 CSS 中的“布局”属性（例如：宽度、高度）意味着浏览器须要检查其余全部的元素并“重排”页面，也就是说从新绘制受影响的区域并将他们合并在一块儿。

2. 绘制

此过程是为元素的可视化部分（颜色、边框等）填充像素的过程。绘制元素一般在多个图层上完成。

改变“绘制”属性不会影响页面的布局，因此浏览器会跳过布局步骤但仍然会执行绘制。

绘制常常是整个渲染进程中代价最昂贵的部分。

3. 渲染成合并

在渲染层合并这个步骤中，浏览器须要按照正确的顺序绘制图层。由于有一些元素会发生重叠，因此这个步骤对于确保元素按照预期顺序显示很是重要。

若是你改变了一个既不须要布局也不须要绘制的 CSS 属性，那么浏览器只须要作渲染层合并操做。

有关不一样 CSS 属性触发的详细信息，你能够在 CSS Triggers 上查看。

CSS 性能

后代选择器或许会很是耗能

取决于程序的大小，仅仅使用没有什么特殊性的后代选择器代价会很是昂贵。浏览器会检查每一个后代元素是否匹配，由于后代这种关系不只限于父子之间。

例如：

浏览器会评估页面上的全部连接，最终定位到那个实际位于 #nav 元素内的连接。

一种更高效的方法是在 #nav 元素中的每一个 <a> 元素上添加一个特定的 .navigation-link 选择器。

浏览器从右到左读取选择器

我以为我应该知道这个，由于这个听起来很重要，但我并不知道……

解析 CSS 时，浏览器会从右到左解析 CSS 选择器。

让咱们看看下面的例子：

采起的步骤以下：

• 匹配页面上的每一个 <a> 元素。

• 找到被 <li> 元素包裹的 <a> 元素。

• 使用以前的匹配结果并将范围缩小到那些被 <ul> 元素包裹的结果。

• 最终，在上面的选项中筛选出那些被类名为 .container 的元素包裹的结果。

从上面的步骤咱们能够看出，靠右的选择器越具体，浏览器过滤和解析 CSS 属性的效率就越高。

为了提升上面例子的性能，咱们能够在 <a> 标签上面添加相似 .container-link-style 的类名来替换 .container ul li a。

尽量避免修改布局

更改某些 CSS 属性可能会须要更新整个页面的布局。

例如，width、height、top、left（也称为“几何属性”）等属性就须要从新计算布局和更新渲染树。

若是在大量的元素上更改这些属性，那么计算和更新他们的位置/大小须要花费很长的时间。

当心绘制的复杂性

在绘制方面，一些 CSS 属性（例如：blur）会比其余属性花费更高的代价。能够考虑使用其余更有效的方法来实现相同的效果。

代价高昂的 CSS 属性

一些 CSS 属性会比其余属性花费更高的代价，这意味着他们须要更长的时间来绘制。

其中一些属性以下：

• border-radius

• box-shadow

• filter

• :nth-child

• position: fixed

这并不意味着你根本不该该使用他们，但你应该明白，若是一个元素使用其中某些属性并将渲染数百次，会影响到渲染性能。

顺序

顺序在 CSS 文件中很重要

让咱们看下面的 CSS 代码：

而后再来看看这段 HTML 代码：

咱们会发现影响渲染效果的不是选择器在 HTML 代码中出现的顺序，而是选择器在 CSS 文件中出现的顺序。

评估 CSS 性能的一个好方法是使用浏览器的开发者工具。

---

若是你使用的是 Chrome 或者 Firefox，能够打开开发者工具，转到 Performance 标签，并记录当你加载页面或与页面互动时发生的状况。

资源

在为这篇文章作研究时，我遇到了一些很是有意思的工具，以下所示：

CSS Triggers —— 该网站列出了一些 CSS 属性，以及在应用程序中使用和修改这些属性对性能的影响。

Uncss —— 一种能够从 CSS 文件中删除未使用的样式的工具。

Css-explain —— 一种能够解释 CSS 选择器的小工具。

Fastdom —— 批处理 DOM 读/写操做的工具，能够加快布局性能。

差很少就是这样啦！但愿它有意义！

---

感谢阅读！ 🙏

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。