写高效 CSS 有哪些“坑”（gotchas）？

What are some of the "gotchas" for writing efficient CSS?

题目类型: 技术面试题

这是一道技术面试题，常见于澳洲IT公司面试中。

难度: hard

分类: css

标签: performance, selectors, reflow, repaint

参考答案摘要

答案 浏览器匹配选择器通常从最右侧（key selector）开始向左回溯；选择器链越长、key selector 越宽泛（如通配符或标签），匹配成本越高。 尽量使用类选择器、短链路；BEM 等命名法鼓励“单类选择器”，既高效又好覆盖。 了解哪些属性会触发 reflow/repaint/composite（如布局相关属性更昂贵），动画尽量用 transform/opacity。

本题提供 STAR 原则详细解答和技术解析，登录匠人学院学习中心即可查看完整答案。