用postcss插件在构建阶段强制校验box-sizing：必须在postcss.config.js最前端注入自定义规则，检查html{box-sizing:border-box}及,::before,*::after{box-sizing:border-box}是否同时存在且位于所有样式顶部，缺失则构建失败。
如何用 PostCSS 插件在构建阶段拦截缺失的 box-sizing 全局声明
不靠人肉检查，直接让构建失败——这是最硬的“强制校验”。postcss-reporter 配合自定义规则能识别 CSS 文件中是否缺失 html { box-sizing: border-box; } 和 *, *::before, *::after { box-sizing: inherit; } 这两条关键声明。
常见错误现象：团队成员提交了新 CSS 文件，但没加全局重置；第三方组件样式覆盖了根级设置；PostCSS autoprefixer 自动插入前缀时，误删了顶部声明。
- 必须把校验逻辑放在
postcss.config.js的最前端，确保它扫描所有输入 CSS，包括@import进来的文件 - 仅检查
html选择器不够，要同时匹配*::before和*::after—— Safari ≤12.1 对伪元素通配符有解析 bug，漏掉任一都会导致装饰图标错位 - 不要依赖
stylelint的declaration-property-value-blacklist，它无法判断规则是否“出现在顶部”，而位置恰恰决定优先级
为什么 stylelint 的 standard 规则集不足以保障 box-sizing 安全
stylelint-config-standard 默认不校验盒模型声明是否存在，它只管写法是否合规。你写了 box-sizing: border-box 但只作用于某个 .card 类？它不会报错；你漏掉了 *::after？它也默不作声。
使用场景：CI 流水线中跑 stylelint --fix 后，开发者以为“已合规”，结果上线后 iOS Safari 中 input[type="search"] 的清除按钮偏移 2px。
- 真正需要的是“存在性断言”：必须有且仅有两条规则，且必须位于所有其他样式之前
-
stylelint-plugin-scss的at-root-no-redundant可辅助检查是否意外嵌套了全局重置，但不能替代存在性验证 - 若项目用了 CSS-in-JS（如 Emotion），需额外配置 Babel 插件扫描
css模板字符串，否则校验盲区极大
如何用 Jest + jsdom 在单元测试中验证动态插入节点的 box-sizing 继承行为
构建时校验只能保“静态入口”，但真实页面会通过 document.createElement 或第三方 SDK 插入节点。这些节点是否自动继承 border-box？得用测试跑出来。
容易踩的坑：jsdom 默认不启用完整 UA 样式，input 元素的初始 box-sizing 是 content-box，和真实浏览器不一致；mock 不到位会导致测试通过但线上出问题。
- 测试前必须手动加载项目实际使用的重置 CSS 字符串，不能只靠
jsdom.reconfigure({ resources: "usable" }) - 断言目标不是“有没有声明”，而是“新创建的
div、span::before、button的getComputedStyle返回值是否为border-box” - 特别验证
svg text元素——它不继承box-sizing，但测试常忽略这点，导致移动端文字截断问题漏检
上线后如何用 PerformanceObserver 捕获 runtime 的 box-sizing 覆盖冲突
即使构建和测试都过了，运行时仍可能被内联样式、广告脚本或 CMS 注入的 CSS 覆盖。这类问题无法提前预测，只能监控。
性能影响几乎为零，但必须避开 requestIdleCallback——它可能错过首屏关键节点的计算时机。
- 监听
PerformanceObserver的layout-shift事件，当某元素offsetWidth在 100ms 内突变 >2px，立刻抓取其getComputedStyle(el).boxSizing并上报 - 重点监控表单控件：
input、textarea、select，它们被覆盖后光标偏移不可逆 - 上报字段必须包含
el.tagName、el.getAttribute("class")、computedStyle.boxSizing和触发该样式的CSSRule.cssText片段，否则无法定位冲突源
::after，测试时 mock 不到广告脚本注入的样式。这两处一旦失效，问题就藏在 Safari 移动端的光标偏移里，等用户截图反馈才暴露。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
