front-end-interview-handbook/packages/quiz/questions/what-are-some-of-the-gotchas-for-writing-efficient-css/zh-CN.mdx

---
title: 编写高效的CSS有哪些 "麻烦"？
---

首先，要明白浏览器是从最右边（关键选择器）到左边匹配选择器的。 浏览器根据关键选择器过滤出 DOM 中的元素，并向上遍历其父元素以确定匹配。 选择器链长度越短，浏览器就能越快确定该元素是否与选择器匹配。 因此避免具有标签和通用选择器的关键选择器。 它们与大量的元素相匹配，浏览器将不得不做更多的工作来确定父代是否匹配。

[BEM（块状元素修饰符）](https://bem.info/)方法论建议所有的东西都有一个单一的类，而且，在你需要层次的地方，也会被烘托到类的名称中，这自然使得选择器高效且易于覆盖。

要注意哪些 CSS 属性[触发](https://csstriggers.com/)回流、重绘和合成。 尽可能避免写入改变布局的样式(触发回流)。