识别废弃框架样式最快路径是直接查看class名，如Bootstrap 3/4的.panel、.img-responsive等在新版中已失效；需结合DevTools检查划掉规则、语义退化、结构重写、CSS文件清理及JS初始化逻辑迁移。
如何识别项目中残留的废弃框架样式
直接看 class 名是最快路径。Bootstrap 3/4 的 .panel、.img-responsive、.btn-default，Foundation 的 .row.collapse 或 .small-12，这些在 Bootstrap 5 或现代 CSS 中已无对应实现——浏览器不会报错，但样式会“消失”或错位。打开 DevTools 的 Elements 面板，选中一个元素，若在 Styles 面板里看到某条规则被划掉（strikethrough），且来源是旧版框架 CSS 文件（如 bootstrap.min.css?v=3.4.1），基本可判定该类已失效。
更隐蔽的是语义退化：比如页面里大量 <div class="container"> 包裹着 <code><div class="row">，但没用 Flex/Grid 布局支撑，仅靠旧版浮动模拟网格——此时即使 DOM 结构还在，响应式行为也早已失效。<h3>剥离时必须同步重写 HTML 结构而非只删 class</h3>
<p>只删 <code>.col-md-6 不加替代布局，会导致内容坍缩成单列；只删 .form-group 而不重构 <label> 和 <input> 的包裹关系，表单控件会失去对齐和间距。关键不是“去掉旧东西”，而是“补上新结构”：
-
<div class="row"><div class="col-md-6">→ 改为<div class="grid-row"><div class="grid-col">，再用 CSS Grid 控制分栏 -
<div class="form-group"><label>...</label><input></div>→ 必须改为<label for="xxx">...</label><input id="xxx">，且移除所有包裹容器 -
<button class="btn btn-primary">→ 若保留按钮语义，至少确保padding、border-radius、font-weight在基础 CSS 中有兜底定义
CSS 文件引用与作用域清理要同步进行
删掉 HTML 里的 class 不等于清除了样式污染。旧框架的 CSS 文件仍可能通过 <link rel="stylesheet" href="bootstrap.css"> 全局注入，其选择器（如 button:focus、body *:not(.my-app) .text-center）仍在影响新结构。必须：
立即学习“前端免费学习笔记（深入）”；
- 检查
<head>中所有<link>，确认路径是否指向已废弃版本（如bootstrap@3.3.7） - 搜索项目中是否存在
@import语句引入旧 CSS（尤其在 SCSS/Less 文件里） - 禁用旧 CSS 后，运行 Lighthouse 的 “Accessibility” 审计，观察是否出现颜色对比度不足、焦点样式丢失等隐性问题——这往往是旧框架重置了
outline或color导致的
JS 初始化逻辑常被忽略但极易静默失败
Bootstrap 5 及之后版本完全移除 data-* 自动初始化机制。如果页面还留着 <button data-toggle="modal" data-target="#xxx">，点击将毫无反应，控制台也不会报错。这类 JS 行为必须手动补全：
- 查找所有含
data-toggle、data-dismiss、data-trigger的元素，逐个替换为显式 JS 调用（如new bootstrap.Modal(...)） - 确认
bootstrap全局对象已加载（CDN 引入需在 script 标签中声明type="module"或确保执行时机在 DOM 加载后） - 若已迁移到纯 CSS 方案（如用
:checked + label实现开关），则必须删除对应的 JS 监听器，否则事件绑定残留会干扰新交互
最易被跳过的点：旧框架常把样式 reset 和 layout 初始化混在同一份 JS 里。剥离时若只删样式类、不清理 JS，可能导致 document.body.classList.add('loaded') 这类副作用逻辑继续触发，进而影响后续自定义动画或懒加载判断。
