直接写 .btn 会让人不敢改样式，因为它未声明所属模块、上下文及状态，导致多处复用时样式互相覆盖，被迫滥用 !important 或宽泛选择器，修改易引发连锁问题。
为什么直接写 .btn 会让人不敢改样式
因为 .btn 没说明它属于哪个模块、在什么上下文中生效、当前是什么状态。一个项目里可能有登录页的按钮、弹窗里的关闭按钮、表格操作栏的导出按钮，都用了 .btn，但设计要求完全不同——结果只能靠 !important 或更宽泛的选择器硬盖，越改越脆。
- 改一个
.btn的 padding，可能意外影响侧边栏导航链接 - JS 里用
document.querySelector('.btn')绑定事件，结果匹配到不该响应的元素 - 设计师说“主按钮用蓝色”，开发写
.btn--blue，但下个迭代改成紫色，“blue” 这个类名就失效甚至误导
button__icon 和 button--primary 的区别在哪
前者是元素（Element），必须依附于 button 这个块存在；后者是修饰符（Modifier），只表达一种可开关的状态，且必须和基础块类共存。单独写 button--primary 是无效的，它不描述“谁的 primary”，也不构成完整语义。
- 正确：
<button class="button button--primary"><span class="button__icon"></span>提交</button> - 错误：
<span class="button--primary">提交</span>（丢失归属） - 错误：
<span class="button__icon--primary"></span>（__icon是子元素，不能自己带--修饰符） - 错误：
button--large-disabled（复合修饰符，应拆成button--large button--disabled）
怎么判断一个名字是不是合法的 BEM 类名
看三件事：有没有明确 Block、__ 和 -- 是否用对位置、是否能脱离 HTML 上下文被理解。
-
header__logo--dark合法：Block 是header，Element 是logo，Modifier 是dark -
card-content非法：缺__，无法区分是 Block 还是 Element -
user-card__avatar__img非法：Element 不能嵌套，__img应属于avatar块本身，或抽成独立imageBlock -
nav-item-active非法：既没__也没--，且item是nav-menu的 Element，不是独立 Block
在 React/Vue 里动态拼 className 容易踩什么坑
手动拼字符串看似简单，但错一个字符、漏一个空格、多一个下划线，就等于写了无效类名，样式不生效还查不出原因。
- 写成
`${block}__${elem}--${mod}`：如果elem是"user name"，结果就是user-profile__user name--hover，浏览器当两个类处理 - 忘记加基础块类：
button--primary单独存在，没有button，CSS 规则根本不会命中 - 用
is-active这类布尔状态类时，没统一前缀，比如混用is-loading和active，导致状态管理混乱 - 没配
stylelint-selector-bem-pattern，等上线才发现满屏modal-header__close-btn（少一个-）
__ 套 __。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
