CSS 叠层失控怎么查：用 Stylelint、Layer 和本地回归收口-三亩地-编程学习日记

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 面板查看布局、绘制与合成工作。必要时在低端移动设备上复测。

静态规则能减少明显的样式风险，最终仍应以组件集成测试和真实浏览器的渲染结果为准。

日记详情

CSS 叠层失控怎么查：用 Stylelint、Layer 和本地回归收口