如何确保多人协作时类名不重复 过BEM规范约束命名空间最佳践|Duuu笔记
针对CSS开发中常见问题的解答
BEM通过块名+元素名+修饰符的三段式命名和对应文件结构强制约束类名，避免全局样式冲突；它不自动隔离但可读可控，需配合代码审查落地。
为什么直接用
.button
会冲突
多人协作时，
.button
这种泛化类名大概率被不同模块重复定义——A组写了
.button { color: red; }
，B组后来加了个
.button { padding: 8px; }
，结果样式互相覆盖，谁的 CSS 后加载谁赢。这不是浏览器 bug，是 CSS 全局作用域的天然特性。
关键不是“能不能避免”，而是“不加约束就必然发生”。哪怕团队约定命名前缀，时间一长也会有人漏写、缩写不一致（
btn
/
ui-btn
/
commonButton
），最终退化成拼运气。
BEM 的三段式命名怎么落地到文件结构
BEM 要求类名形如
block__element--modifier
，但光改名字没用，得让文件组织方式强制对齐。比如一个搜索框组件：
search-form/
目录下放所有相关文件
CSS 文件里只出现
.search-form
、
.search-form__input
、
.search-form--compact
JS 中操作 DOM 也只认这些类名：
document.querySelector('.search-form__submit')
重点：目录名 = Block 名，所有子元素和修饰符都从这个根出发。一旦发现某处用了
.input
或
.btn
，就是违反约定，立刻能定位到是谁绕过了规范。
“
（深入）
”；
遇到嵌套组件时 BEM 容易崩在哪
常见错误是把嵌套关系硬塞进类名，比如
.header__nav__item
或
.card__content__title
。BEM 明确反对这种“路径式”写法——
__
只表示直属子元素，不表示 DOM 深度。
Action Figure AI
借助Action Figure AI的先进技术，瞬间将照片转化为定制动作人偶。
下载
正确做法是让每个 Block 自洽：
.card
内部如果有个标题，就叫
.card__title
，不管它实际在
还是
里
如果标题本身是个独立组件（比如带图标+文字的复合标题），那就抽成新 Block：
.title-block
，在
.card
里用
否则，一旦 DOM 结构微调（比如加一层 wrapper），类名就得全改，维护成本飙升。
要不要用 CSS Modules 或 scoped CSS 替代 BEM
可以，但代价是割裂。CSS Modules 生成哈希类名（
SearchForm_input__aBc12
）确实杜绝冲突，但它让开发者失去对类名的控制权——调试时看到的类名和源码对不上；第三方库或 SSR 渲染可能无法注入对应类名；想用 JS 动态切换状态（
el.classList.add('is-loading')
）还得靠
classNames
或额外映射。
BEM 是人可读、可预测、可调试的折中方案。它不解决“自动隔离”，而是用清晰规则把冲突风险压到最低。真要上 CSS-in-JS 或 scoped，建议只在新项目小范围试水，老项目改用 BEM 更平滑。
最常被忽略的一点：BEM 不是写完就算，得配合代码审查卡住
class="xxx"
里的非法字符串。没这道门禁，再好的规范三个月就形同虚设。
