应使用 btn--primary，因其表达语义“主要操作”，而非固定颜色；btn--danger 同理表危险操作，二者均通过 css 变量统一控制色值，避免硬编码与主题耦合。

按钮颜色用 btn--primary 还是 btn--danger？别硬编码色值

修饰符本质是语义开关，不是样式快照。写 btn--primary 是告诉团队“这是主要操作按钮”，不是“它必须是蓝色”。一旦设计系统换主题，所有 btn--primary 自动走新配色；如果直接写 background: #007bff，就得全局搜改。

• 所有颜色修饰符只在 CSS 中定义一次，比如 .btn--primary { background-color: var(--color-primary); }
• 禁止在 HTML 里靠 class 名猜颜色，比如 btn--blue 或 btn--red —— 这等于把视觉耦合进结构
• 如果某页临时要“红色的主要按钮”，加 btn--primary btn--urgent 组合，而不是新建 btn--red-primary

btn--sm 和 btn--lg 的 padding/margin 怎么设才不冲突？

大小修饰符只控制尺寸相关属性：padding、font-size、line-height、border-radius。绝对不要在里面改 margin 或 display —— 那属于布局职责，该由父容器或工具类（如 m-2）管。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 小按钮：padding: 4px 12px; font-size: 12px;
• 大按钮：padding: 10px 24px; font-size: 16px;
• 如果按钮在卡片底部需要下边距，加 mb-3 类，而不是让 btn--lg 自己塞个 margin-bottom: 1rem

为什么 btn--disabled 不能只靠 opacity: 0.5？

仅调透明度会丢失可访问性：屏幕阅读器可能仍认为按钮可交互，键盘用户还能 Tab 进去，且点击无反馈。真正禁用必须同步处理三件事。

• 加 disabled 属性到 <button></button> 元素本身（HTML 层面禁用）
• CSS 中用属性选择器匹配：button:disabled, .btn--disabled[disabled]，再设样式
• 必须包含 cursor: not-allowed + pointer-events: none（防鼠标误点）+ tabindex: -1（防键盘聚焦）

多个修饰符连用时，class 顺序影响样式吗？

不影响。CSS 优先级看选择器权重，不是 class 出现顺序。但顺序影响人眼可读性与维护成本。

• 推荐固定顺序：btn btn--primary btn--sm btn--disabled（基础 → 语义 → 尺寸 → 状态）
• 避免 btn--sm btn--primary btn btn--disabled 这种穿插写法，后期加新修饰符容易错位
• 如果用预处理器（如 Sass），可用 @extend 或 %btn-modifier 抽离共用逻辑，但编译后仍是平铺 class，顺序规则不变

BEM 修饰符不是贴纸，是契约。一旦约定 btn--loading 表示异步中状态，那它就必须伴随 spinner 插入、aria-busy="true"、以及禁用交互 —— 否则下次有人真用了，逻辑就断了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！