CSS全局冲突的本质是多源写入同一命名空间，真正有效的解法只有隔离：构建时（CSS Modules）、运行时（CSS-in-JS）或人为划界（ID限定+prefix）。
用 CSS Modules 替代全局 class 名
直接放弃 .button 这种裸类名，改用构建工具支持的模块化方案。Webpack、Vite 默认都支持 css-modules，后缀写成 .module.css 就自动启用。
它会把 .btn 编译成类似 Button_btn__Kx2f1 的唯一哈希名，天然隔离。不用手动拼前缀，也不依赖命名约定。
- Vue 单文件组件里用
<style module>；React 中 import 的样式对象是 JS 对象，必须用className={styles.btn}绑定 - 注意：不能在 HTML 字符串模板里硬写
class="btn"，那会失效——模块名只存在于 JS 运行时 - 如果需要穿透到子组件或第三方组件，用
:global(.highlight)包裹，但这是例外，不是默认做法
遇到第三方库样式冲突怎么办
比如 antd 或 tailwindcss 本身是全局注入的，你的 .modal 可能意外覆盖它的 .modal。
解法不是删它，而是用作用域限定：
立即学习“前端免费学习笔记（深入）”；
- 给整个应用最外层容器加一个唯一 ID，比如
<div id="my-app">，然后所有自定义样式前面加上#my-app，如#my-app .card { ... } - Tailwind 用户可配置
prefix选项，在tailwind.config.js里设prefix: 'tw-'，让所有类变成tw-text-lg - 避免用
!important去“赢过”第三方样式——它只会让后续维护更难，且无法解决同权重下的层叠顺序问题
为什么 BEM 命名不能彻底解决冲突
BEM（.block__element--modifier）只是靠命名规范降低概率，并不改变 CSS 本身是全局的这一事实。
只要两个文件都定义了 .header__title，且都进了同一份 CSS 打包结果，就一定存在覆盖风险。
- 团队协作时，不同人写的
.form__input可能样式完全不同，打包后以引入顺序为准，后者胜出 - 没有构建阶段的哈希或作用域处理，BEM 类名依然可被 JS 通过
document.querySelector('.form__input')拿到并修改，暴露面太大 - 它对复用友好，但对隔离性无实质提升——适合小项目过渡，不适合中大型工程长期依赖
CSS-in-JS 方案要注意什么
像 styled-components 或 emotion 确实能生成唯一 class，但不是所有场景都合适。
- 服务端渲染（SSR）时，必须确保服务端和客户端生成的 class 名完全一致，否则会触发样式闪烁或 React 警告
Prop `className` did not match - 动态插入样式（比如根据 props 计算颜色）容易产生大量内联 style 标签，影响首屏性能；建议用
css函数提前定义原子样式，再组合 - 调试时看到的 class 名如
sc-bdVaJa不直观，需开启displayName或label选项辅助定位
