BEM通过block__element--modifier结构将归属、层级、状态锁进类名，使样式冲突从随机覆盖变为可查的结构错误；__和--是工具链识别硬性锚点，不可替换或省略。
因为BEM不是“让CSS看起来更整齐”的风格偏好，而是用命名即作用域的方式，直接堵住大型单体应用里最常崩盘的三个口子：类名冲突、样式归属不可知、改一处牵全身。
为什么大型单体应用里.title这种类名等于埋雷
单体应用里，Header、Dashboard、Modal这些组件常被同时挂载在 DOM 中。如果它们都用.title，浏览器根本不管谁是谁——只按 CSS 加载顺序和权重决定最终生效的是哪个.title。你改Header.css里的.title，Modal里的标题可能跟着变高、变色、甚至消失。
- 审查元素时看到
.title，但点进去发现样式来自user-profile.css，而你正在改的是product-list.css - 搜索替换
.title，结果把所有页面的标题都干掉了，没人敢删旧规则，CSS 文件越积越厚 - 新人接手时，看到
.card .title，得先猜这个.card是不是全局通用，还是某个模块私有
BEM 把.title变成header__title、dashboard__title、modal__title，类名本身就成了“户籍证”——不用查引用、不靠注释、不依赖构建工具，人眼一扫就知道归属。
stylelint-selector-bem-pattern必须开，否则 BEM 形同虚设
光靠文档或口头约定，BEM 在百人协作中撑不过两周。真正起效的是工具链在保存/提交时立刻报错：
- 检测到
.header .logo这种嵌套选择器，立刻中断提交 - 发现
user-card_avatar（漏了双下划线）或button--primary--large（修饰符连缀），标红提示 - 配置
componentName: "[a-z][a-zA-Z0-9]+"，防止出现MyButton这种驼峰写法破坏一致性
CI 阶段跑npx stylelint "**/*.{css,scss}"是底线。没这层拦截，团队很快就会退回“我写我的，你别动我的”状态，BEM 名字再规范也救不了失控的样式树。
HTML 里写class="card__body"，就别在 JS 里拼className
动态类名是最容易绕过 BEM 约束的地方。以下写法看似灵活，实则埋坑：
className={`card__body ${isCollapsed ? 'card__body--collapsed' : ''}`}
问题在于：空格漏写、大小写错、条件分支多时逻辑混乱，而且 IDE 无法跳转到对应 CSS 声明。
- 统一用工具函数，比如
cn('card__body', { 'card__body--collapsed': isCollapsed }) - 禁止
el.className += ' card__footer'——会覆盖已有类名，破坏结构 - 禁止在 JSX 里写
class="card card__body"这种冗余，card__body已隐含归属，card根类可由组件容器自动注入
真正难的不是记住语法，而是当要加一个 tooltip 时，本能地新建/components/tooltip/目录，而不是往modal.css里塞.modal__tooltip——这需要前几个模块的示范 + 目录结构 CI 校验（比如检查tooltip.css里是否出现了.modal__*）。
BEM 和 CSS Modules 不是二选一，而是各管一段
CSS Modules解决的是编译期作用域隔离，BEM解决的是人眼可读性与协作边界。开了CSS Modules但还写title、list，DevTools 里 class 列表照样是一堆无意义字符串，Code Review 时没人知道styles.list到底对应哪个业务模块。
- 推荐组合：
Card.module.css里定义.card、.card__header、.card--featured，再通过composes或:global导出原始类名用于 SSR 或调试 - 避免
Button.module.css里写.root、.label——这等于白开了CSS Modules，BEM 的语义约束全失效 - 第三方库（如 Ant Design）自带类名体系，不要套
my-button__inner这种包裹，既冗余又断开主题变量链
最后一点容易被忽略：BEM 只管有明确业务语义的组件。u-text-center这类工具类、theme-dark这类全局变量、reset-list这类归一化规则，硬塞进 BEM 结构只会让命名膨胀且语义失焦——它们本就不该有“块”的归属感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
