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

What
are
some
of
the
gotchas
for
writing
efficient
CSS?

题目类型: 技术面试题

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

难度: hard

分类: Performance

标签: selector-performance, bem, reflow, repaint

参考答案摘要

答案 首先要理解：浏览器从最右侧（关键选择器）向左匹配选择器。浏览器会先根据关键选择器在 DOM 中筛选元素，再向上遍历其父元素来判断是否匹配。选择器链越短，浏览器越快判断元素是否匹配。因此应避免把标签选择器和通配选择器作为关键选择器，因为它们会匹配大量元素，浏览器需要做更多工作来判断父级是否匹配。 BEM（Block Element Modifier）方法论建议：一切都使用单一 class；如果...

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