应优先使用 class 选择器并限制后代选择器深度，避免通配符和长链标签选择器；慎用伪类和属性选择器；will-change 需按需启用并及时重置；真正影响性能的是样式属性本身而非选择器写法。
避免使用通配符和标签选择器做性能敏感区域的样式控制
通配符 * 和纯标签选择器（如 div、span）会强制浏览器遍历大量节点，尤其在 DOM 深度大或数量多时，显著拖慢样式计算速度。现代浏览器虽有优化，但它们仍无法跳过匹配过程，且容易意外命中非预期元素，导致后续重排/重绘范围扩大。
- 把
* { box-sizing: border-box; }改为只作用于容器：例如.app *, .app > * { box-sizing: border-box; } - 避免用
ul li a这类长链标签选择器；改用带 class 的精确路径，如.nav-link - 慎用
:not()配合标签选择器，比如div:not(.ignore) p会让引擎先找所有div再过滤，开销远高于.content p
优先使用 class 选择器，禁用高代价的属性选择器和伪类
class 是 CSS 选择器中匹配效率最高的一类，浏览器可直接哈希查找。而 [type="text"]、:nth-child(2n)、:hover 等不仅匹配慢，在交互频繁时还可能触发不必要的重绘或样式重新计算。
- 把
input[type="email"]替换为.input-email，并在 HTML 中显式添加该 class - 避免在动画关键帧或滚动监听区域使用
:checked或:focus-within控制布局属性（如height、display），它们易引发回流 -
:is()和:where()虽语法简洁，但若内部包含低效子选择器（如:is(div p, .foo li)），仍会继承各自匹配成本
限制后代选择器深度，用 BEM 约束嵌套层级
每增加一级后代关系（空格），浏览器就要为每个候选元素向上遍历祖先链验证是否匹配。深度超过 3 层（如 .header .nav .item .link）时，样式计算时间呈明显上升趋势，尤其在动态插入节点后触发全局样式重算时更明显。
- BEM 命名法天然限制层级，例如用
.menu__item_active替代.menu .item.active - 避免用
body .container article h2这类“从根写起”的写法；直接用.article-title - 用
>子选择器替代空格时需谨慎：它虽减少匹配范围，但若父元素动态增删 class，子元素样式可能意外失效
用 will-change 和图层提升前先确认是否真有必要
will-change: transform 或 will-change: opacity 会让浏览器提前将元素提升为独立合成层，从而把后续动画从主线程绘制中剥离——但这不是免费的。过度使用会导致内存占用飙升、纹理上传变慢，甚至因图层过多反而降低渲染性能。
立即学习“前端免费学习笔记（深入）”；
- 只对明确会频繁变化的元素设置
will-change，且动画结束后应设回auto（可通过 JS 切换 class 实现） - 用 Chrome DevTools 的
Layers面板检查是否已有合成层；若元素已在 GPU 图层中，再加will-change不仅无效，还可能干扰浏览器自动优化 - 比起盲目加
transform: translateZ(0)，优先考虑用contain: layout paint style来限制样式影响边界，减少重绘区域
.card {
contain: layout paint style;
}
.card:hover {
transform: translateY(-2px);
}真正影响重绘/回流的从来不是单个选择器写法，而是它所绑定的 CSS 属性是否触发布局计算。哪怕用了最简短的 .btn，只要给它加了 width: 50% + float: left，照样引发回流。所以别只盯着选择器“看起来快不快”，得看它最终干了什么。
