利用BEM命名空间提升CSS样式表健壮性

为什么直接写 `.button` 会炸掉别人的样式

CSS 这把利器有个老毛病：全局作用域。一个 .button 这么通用的名字，只要在多个模块、不同团队甚至第三方库里重复出现，后加载的规则就会悄无声息地覆盖前面的，而且不给你任何警告。尤其是当你身处微前端架构、SSR 项目，或者老系统里叠加新组件时——一个 .icon 类可能同时控制着导航图标、弹窗关闭按钮、表格操作列。你改了一处，三处一起崩。

常见翻车现场：margin 突然变大，display 被强改成 inline-block，字体颜色莫名其妙继承自某个远古 body 规则。打开开发者工具一通排查，才发现是另一份 CSS 文件里的同名类在捣乱。

别指望“我们团队都很守规矩”这种话。npm 包自带的样式、UI 库的局部引入、甚至 create-react-app 默认注入的 index.css，都可能埋着雷。尽量别用语义化过强但泛滥的名字，比如 .header、.list、.content。即使祭出 !important，也只是把冲突往后拖，让调试变得更恶心。

BEM 命名不是加前缀，而是建隔离墙

BEM（Block__Element--Modifier）本质上是通过命名约定制造逻辑边界，让类名自带上下文。关键不在于“写得有多长”，而在于“能反向定位来源”。比如 .user-card__a vatar--large 这个类名，一眼就能看出它属于 user-card 模块，是头像元素，而且处于大尺寸状态——这个信息量本身就阻止了误复用。

几个实操建议：

• Block 名必须具体：用 .search-bar，别用 .bar；用 .product-grid，别用 .grid
• Element 用双下划线 __，Modifier 用双短横 --，这是硬约定。别写成 .searchBar_a vatar 或 .search-bar-large
• 禁止跨 Block 写组合选择器：.user-card .button 是反模式，应该写成 .user-card__action-button
• Modifier 不要单独使用：.button--primary 必须和 .button 同时存在，否则基础样式没兜底

和 CSS Modules / scoped CSS 不是替代关系

BEM 解决的是命名空间污染，CSS Modules 解决的是作用域隔离，两者目标不同。BEM 在全局 CSS 里依然有效；而 CSS Modules 生成的哈希类名（比如 Button_button__abc123）其实暗合 BEM 的思路——只是把 Block 名的绑定自动化了。

容易踩的坑：

• 在 Vue 的