css类名冲突的根本解法是隔离而非改名：css modules通过哈希化实现构建时模块化隔离，bem需配合真实dom结构落地，外层命名空间（如[data-scope]）可作为无构建支持时的兜底方案。
直接结论：别靠堆权重硬刚，优先用 CSS Modules 或外层命名空间包裹，BEM 命名必须配合真实 DOM 结构落地，否则只是自我安慰。
为什么 .btn 改了但 .btn-primary 还是蓝的
这不是你没写对，是第三方库（比如 Element Plus、Ant Design）用更具体的选择器覆盖了你。例如它写了 .el-button.el-button--primary（权重 0,0,2,0），而你只写 .btn-primary（0,0,1,0），哪怕后加载也赢不了。
- 打开 DevTools 的 Styles 面板，看目标样式是否被划掉；被划掉且来源是第三方 CSS 文件，基本就是权重或顺序问题
- 检查 computed 值里生效的是哪条规则，点进去看 selector 全貌，别只信类名表面
- 避免在业务代码里滥用
!important——它会破坏 BEM 的 modifier 层级逻辑，让button--large无法覆盖button
CSS Modules 是最省心的作用域隔离方案
Webpack/Vite 默认支持 .module.css，编译后类名自动哈希，.button 变成 .button_jk3f9，天然不冲突。
- 只对
import './Button.module.css'这种显式导入生效；<link rel="stylesheet">或全局@import不受保护 - 第三方库的样式无法直接转为 Modules，需用
:global()显式透出动画、keyframes 等需要全局访问的规则 - Vue 单文件组件中
<style scoped></style>底层也是属性选择器隔离，但对挂到body下的弹窗无效（如el-date-picker）
纯 HTML 或无法改构建流程时，用外层命名空间包裹
给根容器加唯一属性，所有样式规则前置该属性，比如 [data-scope="admin"] .btn，比盲目堆叠 div div .btn 更可控。
- PostCSS 插件如
postcss-prefix-selector可自动给指定 CSS 文件加前缀，配置exclude: [/^html/, /^body/, /^\./]避免误伤已有类名 - Vite 用户推荐
vite-plugin-css-prefix，Webpack 用户配postcss-loader即可，不用动构建逻辑 - 慎用
button.ant-btn这类标签+类组合——很多库用[class*="ant-btn"]或 JS 动态加类，button标签可能根本不存在
BEM 命名翻车最多的地方：类名和 DOM 脱节
BEM 不是起个带双下划线的名字就完事。它要求 search__input 必须对应真实存在的 <div class="search"><input class="search__input"></div>。
- Block 名必须是真实容器节点，不能是抽象概念（如写
header__nav-item，但 HTML 是<nav class="header-nav"></nav>，直接失效） - Modifier 只表达状态：
button--disabled合理，button--full-width是错的——该用工具类或独立布局规则 - 所有子元素都应带完整 Block 名，不省略：
search__input不能简写成__input，否则别人读不懂作用域边界
真正难的不是记住 BEM 规则，而是每次写 class 前问一句：“这个样式属于谁？它会不会在别的上下文里意外生效？”——这个问题比任何命名规范都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
