应采用css Modules实现作用域隔离，通过哈希后缀使类名唯一；若不可行，则用scoped属性或data-前缀手动隔离，辅以统一命名空间前缀和第三方库定制方案。
多个 CSS 库同时引入后样式互相覆盖怎么办
直接后果是按钮变样、字体错乱、间距消失——不是某个库写错了，而是 button、.container、[type="text"] 这类通用选择器被不同库反复声明，后加载的规则胜出。浏览器不关心你用的是 bootstrap 还是 Tailwind，只按层叠顺序和优先级算。
- 别指望靠
!important挨个修复，维护成本爆炸，且可能掩盖真正的作用域问题 - CDN 引入顺序不能解决本质冲突，比如 Ant Design 和 Element Plus 都定义了
.el-button和.ant-btn，但它们内部还共享input:focus这种全局状态 - 构建工具（如 webpack/vite）里用
@import或link顺序加载，仅影响层叠顺序，不隔离作用域
CSS Modules 是最轻量的作用域隔离方案
适用于 react/vue 等支持模块化构建的项目，核心是让类名自动加上哈希后缀，从 .btn 变成 .btn_abc123，天然避免外部样式穿透。
- Webpack 中启用需配置
css-loader的modules: true；Vite 默认支持.module.css文件 - 注意：CSS Modules 只作用于
import './style.module.css'这类显式导入，对link rel="stylesheet"或全局@import无效 - 第三方库的样式无法直接转为 Modules，需配合
:global()显式导出需要透出的类（例如动画类@keyframes）
使用 scoped（Vue）或 data- 属性前缀手动隔离
当无法使用 CSS Modules（比如纯 html + CDN 场景），就得靠人工划定样式边界。Vue 的
底层就是给元素加唯一属性（如 data-v-f3f2d1e4），再把选择器重写为 button[data-v-f3f2d1e4]。
- 纯静态页可用类似思路：给根容器加
data-scope="admin-ui"，所有样式规则前置该属性，如[data-scope="admin-ui"] .btn { ... } - 避免嵌套过深：不要写
[data-scope] .header .nav .item a:hover，层级一多就难维护，也影响性能 - 第三方库若支持主题配置（如 MUI 的
classNamePrefix），优先用它生成带前缀的类名，比硬编码data-更可靠
命名规范不是写作文，是防冲突的硬约束
“BEM”“CSS-in-js 前缀”这些词背后只有一个目的：让类名足够长、足够具体，降低撞车概率。真实项目里，btn-primary 不如 ui-kit-btn-primary 安全，尤其当你同时用两个 UI 库时。
立即学习“前端免费学习笔记（深入）”；
- 团队必须约定命名空间前缀，比如统一用
myapp-，所有自定义类都以它开头：myapp-header、myapp-modal-close - 第三方库尽量不改源码样式，改用其提供的定制方式（如 Bootstrap 的 sass 变量、Tailwind 的
prefix配置项） - 警惕“看似安全”的命名：像
layout、base、reset这类词，多个库很可能都用，实际冲突率极高
实际最难处理的，是那些没文档说明、又大量依赖全局选择器的旧库（比如某些 jquery 插件），它们不会管你有没有 scoped，也不会响应 prefix 配置。这种时候，要么封装一层 Shadow dom，要么老老实实把它塞进独立 iframe——隔离从来不是可选项，只是代价大小的问题。