编写高效 CSS 时需要注意哪些“陷阱”？

首先，了解浏览器从最右侧（关键选择器）到左侧匹配选择器。 浏览器根据关键选择器过滤 DOM 中的元素，并遍历其父元素以确定匹配项。 选择器链的长度越短，浏览器确定该元素是否与选择器匹配的速度就越快。 因此，避免使用标签和通用选择器作为关键选择器。 它们匹配大量元素，浏览器将不得不做更多的工作来确定父元素是否匹配。

BEM (Block Element Modifier) 方法建议所有内容都使用单个类，并且在需要层次结构时，将其也融入到类的名称中，这自然使选择器高效且易于覆盖。

注意哪些 CSS 属性会触发回流、重绘和合成。 尽可能避免编写更改布局（触发回流）的样式。