按钮的block名必须是btn，不能是button或primary-btn；btn是唯一合法基础类名，代表独立可复用ui单元，所有变体如btn--primary、btn--disabled均基于它叠加，且必须直系子元素使用btn__icon等元素类。
按钮的 Block 名必须是 btn，不能是 button 或 primary-btn
btn 是唯一合法的基础类名，它代表一个独立、可复用、语义完整的 UI 单元。写成 button 会和 HTML 标签冲突，primary-btn 或 submit-btn 则把功能耦合进名字里——一旦设计改版要全局替换“主色”，就得批量改类名，而不是只换一个变量。
常见错误：header-btn、user-card__btn、btn-primary（单横线）——这些都不是 BEM，而是命名随意或混用其他规范。
-
btn必须能单独存在并渲染出可用按钮（默认 padding、border、cursor 等需完整定义） - 所有变体都基于它叠加，比如
class="btn btn--primary"，不是class="btn--primary" - 禁止在 JS 中靠 classList 判断
btn--primary是否存在来控制逻辑——修饰符只管样式，状态应由 data-* 属性或 ARIA 控制
图标必须用 btn__icon，位置变体用 btn--icon-left 而不是 btn__icon--left
btn__icon 表示“按钮内部的图标”，它是按钮功能的一部分；而图标在左还是右，属于整个按钮的布局特征，不是图标的内在属性。写成 btn__icon--left 就把布局责任错配给了元素，破坏了语义分层。
典型翻车：btn__icon--primary 看似合理，但实际想表达的是“按钮处于 primary 状态时图标颜色随之变化”——这该由 btn--primary 触发，CSS 内部用变量或后代选择器控制 btn__icon 颜色。
- 正确结构：
<button class="btn btn--icon-left"><i class="btn__icon"></i>提交</button> -
btn--icon-left在 CSS 中只需控制flex-direction或grid-template-columns，不碰btn__icon的尺寸或颜色 - 加载态图标是独立状态，可用
btn__icon--loading，因为它描述的是图标自身的变体（旋转、占位）
修饰符必须可叠加且权重一致，禁用 .btn--disabled:hover 这类嵌套写法
所有修饰符规则必须用单类名选择器，例如 .btn--disabled { }，而不是 .btn.btn--disabled:hover。否则当 btn--loading 和 btn--disabled 同时存在时，后者可能被 hover 伪类拦截，导致禁用态失效。
禁用态必须显式重置交互能力：pointer-events: none、cursor: not-allowed、opacity（不能只靠灰度），否则键盘用户仍可 focus，屏幕阅读器可能误读。
- 所有
--*修饰符都应平级声明，避免依赖顺序或层级 - 不要用
!important解决覆盖问题，它会让后续叠加（如btn--primary btn--disabled）不可预测 - 尺寸类如
btn--large应只调整 padding 和 font-size，不硬编码 height——响应式断点由外层容器控制，而非按钮自身
btn__text 和 btn__icon 必须是直系子节点，禁止出现 btn__content__text
BEM 的 __ 只表示“直属子节点”。如果 HTML 结构是 <button class="btn"><span class="btn__content"><span class="btn__text">提交</span></span></button>，那么 btn__text 就违反了直系约束——浏览器不报错，但类名语义断裂，复用时容易误判作用域。
真正可维护的写法是让 btn__text 和 btn__icon 都直接挂在 btn 下，中间不加 wrapper 层。若需文字居中、图标对齐等布局，用 Flex/Grid 实现，而不是靠 DOM 嵌套推导。
- 允许：
<button class="btn"><span class="btn__icon"></span><span class="btn__text">提交</span></button> - 禁止：
<button class="btn"><div class="btn__wrapper"><span class="btn__text">提交</span></div></button> - SCSS 中只允许一层嵌套：
.btn { &__text {} &__icon {} }，禁止&__wrapper { &__text {} }
BEM 按钮最难的部分不是写对分隔符，而是守住“块的边界”——btn 一旦开始承担布局、主题、动画甚至表单校验逻辑，它就不再是可复用组件，而成了业务特例。每次加新修饰符前，先问一句：这个变体能否在登录页、列表页、弹窗里无修改复用？答案是否定的，那就该拆成新 Block，而不是往 btn 上堆 --。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
