CSS 叠层失控怎么查用 Stylelint、Layer 和本地回归收口CSS 叠层和动效成本都不适合只靠肉眼 CR。Stylelint 查约定浏览器检查真实层叠上下文和渲染路径规则误报要有可审查的例外。1. 为什么 CSS 的问题总是到了线上才暴露CSS 语言本身的弱约束特性决定了它极难靠肉眼 Code Review 发现潜在瓶颈。首先是层叠上下文Stacking Context的隐蔽性。CSS 中决定元素谁盖住谁的从来不是单纯的z-index数字大小而是元素所在层叠上下文的树形结构。一个子元素的z-index写到了99999只要它的父元素处于z-index: 1的上下文就永远盖不过邻居z-index: 2的容器。本地开发时如果不做层级校验这种隐患会在多人协同合并组件时集中爆发。其次是交互动效的布局成本。top、margin等属性变化可能触发布局和绘制复杂页面中更值得谨慎使用。transform和opacity往往更适合动效但也不保证没有绘制或合成成本仍要结合 DevTools 的 Performance 面板验证。2. 本地自动审查插件与规则配置实现为了让 CSS 层级与交互性能审查在本地环境一次跑通我们可以在本地配置一套基于 PostCSS 和 Stylelint 的轻量级拦截引擎。下面是生产可用的本地 CSS 检查插件与配置文件实现import stylelint from stylelint; const ruleName plugin/strict-css-performance-and-hierarchy; const messages stylelint.utils.ruleMessages(ruleName, { forbiddenZIndex: (val) [CSS 性能门禁] 严禁写死的硬编码 z-index: ${val}。请使用设计 Token (如 var(--z-dropdown)), forbiddenLayoutAnimation: (prop) [CSS 性能提示] 请复核对布局属性 ${prop} 的 transition优先评估 transform 或 opacity 是否满足需求, forbiddenImportant: 请复核 !important仅在明确的覆盖边界内使用, }); // 可能触发布局的动效属性规则用于提示不替代性能测量。 const REFLOW_PROPERTIES new Set([top, left, right, bottom, width, height, margin, padding]); export default stylelint.createPlugin(ruleName, (primaryOption: boolean) { return (root, result) { if (!primaryOption) return; root.walkDecls((decl) { // 1. 检查硬编码的魔数 z-index if (decl.prop z-index) { const val decl.value.trim(); // 允许 0, 1, -1 以及 CSS 变量 if (!/^(0|1|-1|var\(--.\))$/.test(val)) { stylelint.utils.report({ message: messages.forbiddenZIndex(val), node: decl, result, ruleName, }); } } // 2. 检查 !important 滥用 if (decl.important) { stylelint.utils.report({ message: messages.forbiddenImportant, node: decl, result, ruleName, }); } // 3. 检查高危重排动画属性 if (decl.prop transition || decl.prop transition-property) { const value decl.value.toLowerCase(); for (const prop of REFLOW_PROPERTIES) { if (value.includes(prop) !value.includes(transform)) { stylelint.utils.report({ message: messages.forbiddenLayoutAnimation(prop), node: decl, result, ruleName, }); } } } }); }; });配套的本地.stylelintrc.json规则收口配置{ plugins: [./plugins/stylelint-css-performance.ts], rules: { plugin/strict-css-performance-and-hierarchy: true, max-nesting-depth: 3, selector-max-compound-selectors: 4, color-named: never } }3. 本地检查与验证要把样式与交互性能关卡在本地守住建议在项目中落实以下三项工程化配置在 lint-staged 中运行 Stylelint将硬编码层级、!important和布局类 transition 作为需要复核的规则。对历史样式可先告警再逐步收紧避免一次性阻断大量提交。统一 z-index token在全局样式中定义 dropdown、modal、tooltip 等层级变量并明确 portal 容器和层叠上下文约定。token 不能解决所有遮挡问题仍需检查父级的 stacking context。在目标环境测量动效使用 Chrome DevTools 的 Performance、Rendering 和 Layers 面板查看布局、绘制与合成工作。必要时在低端移动设备上复测。静态规则能减少明显的样式风险最终仍应以组件集成测试和真实浏览器的渲染结果为准。