BEM 按钮类名应分离类型与状态，仅用 .btn 为基础类，功能修饰符如 .btn--submit、状态修饰符如 .btn--loading 均用 --，禁用耦合命名与元素级嵌套，确保 CSS 可叠加、可维护。
按钮类名怎么起才不会后期崩溃
用 BEM 写按钮，核心是把「类型」和「状态」拆开，而不是堆修饰符。比如 .btn--primary 表示主按钮，.btn--disabled 表示禁用态——这两者必须能自由组合，不能写成 .btn-primary-disabled 这种耦合命名。
常见错误是把视觉变体（如圆角、阴影）也当成功能类型来命名：.btn--rounded 看似合理，但一旦设计改版要全局收圆角，就得批量替换所有 --rounded，反而违背 BEM 的可维护初衷。
-
.btn是唯一基础类，所有样式都基于它叠加 - 功能型修饰符用
--（双横线），如.btn--submit、.btn--cancel - 状态型修饰符也用
--，但语义必须是真实 DOM 状态或业务状态，如.btn--loading、.btn--success - 绝对不用
_或__命名修饰符，BEM 不支持元素级修饰符嵌套在按钮内部
CSS 中如何让修饰符真正“可叠加”
关键不是写多少类名，而是 CSS 选择器权重和层叠顺序是否允许叠加生效。比如 .btn--primary 和 .btn--disabled 同时存在时，后者必须能覆盖前者的背景色、文字色、指针样式。
典型坑是用了 !important 或过度依赖标签层级（如 .btn.btn--primary:hover），导致 .btn--disabled 加上去没反应——因为它的规则权重不够，或者被 hover 伪类拦截了。
立即学习“前端免费学习笔记（深入）”；
- 所有修饰符规则统一用单类名选择器：
.btn--disabled { ... }，不加.btn前缀 - 禁用态的样式必须显式重置交互属性：
pointer-events: none、cursor: not-allowed、opacity（别只靠颜色变灰） - 加载态建议用
position: relative+::after插入 loading 图标，避免影响按钮内容流布局 - 如果用 CSS 变量控制主题色，修饰符应只负责开关变量值，而非重复定义颜色值
按钮尺寸和间距为什么不能靠修饰符硬编码
用 .btn--large 这类修饰符控制尺寸看似直观，但很快会遇到响应式断点冲突：PC 上的 large，在移动端可能过大；而同一按钮在卡片内和模态框里，需要的 padding 也不一样。
更稳妥的做法是把尺寸交给容器或上下文控制，按钮自身只定义「弹性基线」：最小宽高、行高、内边距比例。真正缩放由父级或媒体查询接管。
- 放弃
.btn--small/.btn--large，改用.btn--compact（紧凑排版场景）和.btn--fluid（占满父容器）这类语义化修饰符 - 所有 padding/margin 使用 rem 或 em，不写固定 px 值，方便全局缩放
- 文字大小统一继承父级
font-size，按钮内不设font-size，除非有明确可访问性要求（如最小 16px） - 图标按钮（icon-only）必须带
aria-label，且用width/height固定尺寸，不能靠内容撑开
React/Vue 里怎么避免 class 字符串拼接混乱
模板中写 class="btn btn--primary btn--loading" 看似简单，但实际业务中经常要根据 props、loading 状态、权限动态增删，手拼容易漏、难读、不好测。
最轻量的解法不是引入第三方库，而是用原生对象语法——Vue 的 :class 或 React 的 clsx（极简，仅 200B）。重点是把修饰符生成逻辑抽离出来，和 UI 逻辑解耦。
- 不要在 JSX/模板里写三元表达式拼 class：
class={`btn ${loading ? 'btn--loading' : ''}`} - 用计算属性或工具函数返回修饰符数组：
getModifiers() { return ['btn', this.type && `btn--${this.type}`, this.loading && 'btn--loading'] } - 禁止把修饰符写死在组件内部，应由调用方通过 prop 传入类型（
type="submit"），组件只负责映射为对应 class - 如果项目用 Tailwind，BEM 仍可共存——把
.btn定义为 reset 基础样式，修饰符只控制逻辑状态，视觉细节交由 utility class 覆盖
按钮最难的从来不是画得有多像设计稿，而是当产品突然说“所有取消按钮在表单页底部要加 8px 下边距”，你能不能 30 秒定位到该改哪一行 CSS，而不是翻遍 17 个文件找 btn-cancel 的各种变体。
