应将自定义核心样式表置于所有第三方库之后，通过加载顺序、命名空间隔离（如 wrapper 容器或 scoped style）及合理使用 !important 控制 CSS 层叠与特异性，确保外部库在可控范围内生效。
外部 CSS 库（比如 Bootstrap、Tailwind、Ant Design）一旦引入，确实容易覆盖或干扰你项目原有的核心样式。这不是“库有问题”，而是 CSS 的层叠（Cascading）和特异性（Specificity）机制在起作用——关键在 加载顺序 和 作用范围控制，而非简单禁用或删库。
加载顺序：越靠后，优先级越高（但不是绝对）
CSS 文件按 在 HTML 中的书写顺序依次解析，后加载的规则在冲突时更可能生效（前提是选择器特异性相同）。但注意：一个更具体的选择器（如 .header .nav li a:hover）哪怕写在前面，也可能压过后面写的 a。
- 把自定义核心样式表（如
base.css、theme.css）放在所有第三方库之后 - 避免把重置库（如
normalize.css）放在最后——它本该是基础，应最早加载 - 如果用了 CSS-in-JS 或构建工具（如 Vite、Webpack），检查打包后生成的
顺序是否符合预期（有时插件会自动重排）
命名空间隔离：给第三方样式“划边界”
不推荐全局污染式引入（如直接 @import 'bootstrap/dist/css/bootstrap.min.css';），尤其当只用其中几个组件时。更稳妥的方式是：
-
局部引入：用构建工具按需导入（如 Bootstrap 的 SCSS 变量 + 单个组件 mixin；或 Tailwind 的
@layer+ 自定义 class 前缀） - CSS Scoped / Shadow DOM：Vue/React 中启用 scoped style 或使用 Web Components，天然隔离样式作用域
-
手动加命名空间前缀：给第三方类加 wrapper 容器，例如：
然后在 CSS 中写：.my-app .btn { ... }，这样就不会影响页面其他地方的.btn
特异性与 !important 的务实用法
!important 不是洪水猛兽，而是“可控的强制覆盖”。在核心布局或主题色等不可妥协的地方，合理使用反而比写一堆冗余选择器更清晰：
立即学习“前端免费学习笔记（深入）”；
- 只用于真正需要锁定的规则，比如：
body { background-color: #fff !important; } - 避免在第三方库源码里加
!important—— 改它不如封装一层 wrapper - 用开发者工具（DevTools）的“Computed”面板看哪条样式被覆盖、为什么被覆盖，比猜更快
基本上就这些。核心不是“不让外部库生效”，而是让它们在你设定的范围内生效——顺序管全局节奏，命名空间管局部边界，特异性管细节胜负。不复杂，但容易忽略。
