自定义全局重置CSS必须放在所有框架样式之前，否则会被Bootstrap或Tailwind的base/reset覆盖；类名冲突需用BEM、命名空间或Tailwind prefix隔离；特异性问题应通过DevTools排查而非滥用!important；断点须统一配置，避免响应式失效。
全局重置和默认样式谁先加载
原生 CSS 里写 *, *::before, *::after { box-sizing: border-box; } 是常见操作，但若同时引入 Bootstrap 或 Tailwind，它们自带的 reset（如 Normalize.css）或 base styles 可能后执行，导致你的重置被覆盖。关键不是“能不能混用”，而是“谁的 CSS 更早进入文档流”。
- 把自定义 reset 放在所有框架 CSS 的 最前面（
<link>标签顺序决定优先级） - Tailwind 的
@layer base可安全注入 reset，但需确认tailwind.config.js中content路径没漏掉你的 reset 文件 - Bootstrap 5+ 默认不强制重置
box-sizing，它只对表单、按钮等组件设定了特定值——这意味着你全局设的border-box可能被其组件规则用更高特异性覆盖（比如button { box-sizing: content-box; }）
类名冲突：utility class 和自定义 class 同名怎么办
比如你写了 .text-center 想居中文字，而 Tailwind 也提供同名词，但语义一致；但若你写的是 .btn，又引入了 Bootstrap，那两套 .btn 规则会叠加甚至打架——浏览器按 CSS 加载顺序 + 特异性取最终生效的一条。
- 避免手写与框架已有的通用类名（
container、row、flex、hidden）重复，哪怕意图一样 - 用 BEM 或命名空间前缀隔离：比如统一用
.my-btn、.project-container - Tailwind 允许在
tailwind.config.js中配置prefix，如prefix: 'tw-'，这样它的tw-text-center就不会撞你自己的.text-center
特异性（specificity）失控时怎么查
Chrome DevTools 的 Styles 面板里看到某条样式被划掉，不一定是写错了，很可能是另一条规则以更高特异性赢了。尤其当混用 ID 选择器（#header）、属性选择器（[type="submit"]）和框架的类组合（.btn.btn-primary.focus:ring-2）时，特异性容易飙升。
- 打开 DevTools → Elements → 右侧 Styles 面板，点击被划掉样式的「⚠️」图标，看被谁覆盖
- 避免在原生 CSS 里滥用
!important，它会让调试雪上加霜；改用更精确的选择器，或提升框架 class 的加载顺序 - Bootstrap 的某些组件（如 modal）内联了
style属性，这类声明特异性高于外部 class，只能用 JS 动态改，或用[style]属性选择器针对性覆盖（慎用）
响应式断点不一致导致布局错乱
Bootstrap 默认用 sm: 576px、md: 768px，Tailwind 默认是 sm: 640px、md: 768px，而你自己写的媒体查询如果照着某个框架抄，却忘了检查实际数值，就会出现“本该在小屏折叠的菜单，在 600px 还展开着”的问题。
立即学习“前端免费学习笔记（深入）”；
- 统一断点值：要么全用 Bootstrap 的，要么全用 Tailwind 的，别混合引用
- 在
tailwind.config.js中可自定义theme.screens，把它改成和 Bootstrap 一致；反之，Bootstrap 也能通过 Sass 变量重写$grid-breakpoints - 不要依赖框架文档里的“常见值”截图，直接查你项目里实际加载的 CSS 源码（比如搜索
@media (min-width: 768px)）
