html语义化、viewport设置和框架purge配置是css框架失效的三大主因：标签错用破坏可访问性与状态逻辑，缺失viewport导致断点不触发，未配置purge使tailwind体积暴涨至5mb+。
HTML结构是否语义化，直接影响CSS框架能否高效接管
很多开发者把 Bootstrap 或 Tailwind 引入后发现样式“不生效”或“错乱”，根源常不在 CSS 框架本身，而在 HTML 标签用错了。比如用 <div class="btn"> 代替 <code><button class="btn"></button>，不仅让框架的默认 focus、disabled 状态失效，还会破坏可访问性（screen reader 读不出按钮语义）。
常见错误现象：
- 响应式栅格（如
col-md-6）在<div> 上生效，但在 <code><section></section>或<article></article>上“没反应”——其实不是失效，是框架默认只对特定容器（如<div>）做栅格重置，语义标签需额外加 <code>class="container"或包裹层 - Tailwind 的
hover:underline在<a></a>上正常，在<span></span>上无效——因为默认text-decoration不作用于非交互元素，需手动加cursor-pointer和underline - 优先用语义化标签：
<nav></nav>替代<div class="navbar">，<code><main></main>替代<div id="content"> <li>检查框架文档中对“容器”和“上下文”的要求（例如 Bootstrap 5 要求栅格子项必须是 <code><div> 直接子元素，不能嵌套 <code><section></section>） - 用浏览器开发者工具的
Elements面板看 computed styles，确认 class 是否被应用、是否被更高优先级规则覆盖 - 老项目增量接入 Tailwind，原有
.btn是自定义样式，但 Tailwind 的btn并不存在，于是开发者误加class="btn"却没效果，实际该用class="bg-blue-500 text-white px-4 py-2 rounded" - Bootstrap 的
.form-control和自己写的.input同时存在，导致 input 高度、字体大小反复跳变 - 禁用框架的全局 reset（如 Bootstrap 的 Reboot）若已有成熟 reset.css，否则会重置
button、input等默认行为 - 用 CSS scope 或前缀隔离：Webpack 中配
css-loader的modules: true，或给自定义 class 加统一前缀如my-btn、my-card - Tailwind 用户注意：不要在 HTML 里写
class="text-lg font-bold"和class="text-sm font-normal"混用，优先提取成组件级 class，避免重复逻辑 - 未配置 purge（v3.0+ 为
content配置）时，开发版 CSS 可达 5MB+；启用后通常压到 10–30KB - Bootstrap 的完整 CSS（含所有组件）约 200KB，但只引入
bootstrap-grid.css+ 手写基础样式，可控制在 30KB 内 - Tailwind：确保
tailwind.config.js中content字段包含所有模板路径，如["./src/**/*.{html,js,jsx,ts,tsx}"] - Bootstrap：用 Sass 按需导入，删掉不用的
@import "mixins"、@import "utilities"，只留grid和reboot - 别迷信“框架即优化”——一个精简的
reset.css + 自定义变量 + 3个 flex 工具类，有时比加载整套框架更快 - 本地测试一切正常，部署到手机浏览器却“页面缩成一团”，检查发现
里漏了 viewport meta - 用 Bootstrap 的
col-sm-6 col-md-4，但在平板上还是单列——其实是 viewport 设置了user-scalable=no，禁用了 pinch-zoom，间接干扰了断点判断 - 每个 HTML 页面开头必须有 viewport meta，且
content中不要加maximum-scale或user-scalable（除非明确业务需要） - 框架断点值（如 Tailwind 的
768px）对应的是 CSS 像素，不是物理像素；iOS Safari 的“设备宽度”在横屏/竖屏下会变化，靠 viewport 声明告诉浏览器如何映射 - 用 Chrome DevTools 的 Device Toolbar 模拟时，务必勾选 “Disable cache” 和 “Throttling”，否则断点切换可能延迟或失效
实操建议：
CSS框架的 class 命名是否与 HTML class 层级冲突
当项目里既有手写 CSS 又引入了框架，最容易踩的坑是 class 名字撞车。比如你写了 .card { border: 1px solid #ccc; }，而 Bootstrap 也有 .card，但它的 padding、border-radius、box-shadow 完全不同——结果是样式互相覆盖，视觉表现不可控。
使用场景：
实操建议：
框架的 utility class 是否真比手写 CSS 更轻量
很多人以为用 Tailwind 就一定“体积小”，结果打包后 CSS 文件暴涨——这是因为没关掉未使用的 utility。Tailwind 默认生成所有可能组合（如 mt-1 到 mt-96），但项目里可能只用到 mt-2、mt-4、mt-8。
性能影响：
实操建议：
响应式断点是否与 HTML viewport 设置匹配
哪怕 CSS 框架断点定义得再精准，如果 HTML 缺少 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端 Safari、Chrome 仍会以桌面宽度渲染，导致 md:、lg: 类完全不触发。
常见错误现象：
实操建议：
