升级框架后样式异常应先查官方changelog中的breaking changes，再用devtools定位失效类名，谨慎替换并核对前缀、作用域及默认值变更。
查官方 Changelog 时重点看 Breaking Changes
框架升级后样式异常，八成是新版本做了不兼容改动。别急着改 CSS，先去 GitHub 或官网翻 CHANGELOG.md，用浏览器搜索 Breaking Changes 或 Deprecated。很多框架（比如 Bootstrap 5 升级到 6、Tailwind v3 到 v4）会在这里明确列出被移除的类名、默认值变更、或组件结构调整。例如 btn-primary 可能被重命名为 btn--primary，text-center 在某些版本里被合并进 text-align-center —— 这些不会报错，但样式直接失效。
用 DevTools 快速定位「消失的类」
打开浏览器开发者工具，选中异常元素，在 Styles 面板里看哪些类名没生效：如果某个类名显示为灰色、带删除线，或干脆没出现在 CSS 规则列表里，说明它已被移除或重命名。此时右键该类名 → “Break on attribute modification” 不实用，更有效的是：
- 在 Elements 面板中手动删掉疑似旧类名，观察样式是否恢复
- 用 Ctrl+F 搜索旧类名（如
col-md-6），确认是否还存在于框架 CSS 文件中 - 检查
node_modules/your-css-framework/dist/下的最新 CSS 文件源码，搜关键词验证是否存在
替换类名不能靠全文搜索硬替
盲目用编辑器全局替换 pull-left → float-start 很危险：可能误改 JS 字符串、注释、或自定义类。正确做法是：
