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

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

题目类型: 技术面试题

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

难度: hard

分类: Performance

标签: css performance, selector matching, BEM, reflow, repaint, compositing

参考答案摘要

答案 浏览器匹配选择器是从右向左（从 key selector 开始）。先根据最右侧筛选元素，再向上遍历父节点判断是否匹配。选择器链越短，匹配越快。因此应避免以标签选择器或通配符作为 key selector，因为会匹配大量元素并增加遍历开销。 BEM 方法论推荐一切使用单一 class，并把层级关系编码到 class 名中，这样 selector 更高效且更易覆盖。 还要注意哪些属性会触发 re...

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