按钮组block名应为btn-group，因其符合bem社区惯例、字符简洁、css文件名清晰且保障项目内命名统一；btn-group内不定义__item，因按钮本身是独立btn block；尺寸等修饰符须作用于btn自身（如btn--lg），而非btn-group。

按钮组的 Block 名该叫 btn-group 还是 button-group

用 btn-group。BEM 社区和主流 UI 库（如 Bootstrap、Ant Design）已形成事实惯例：缩写 btn 作为 Block 名被广泛识别，且字符更短、CSS 文件名更清晰（btn-group.css）。用 button-group 虽语义完整，但会拉长所有子类名（button-group__item），增加维护成本，也与团队已有组件命名不一致。

关键判断标准不是“是否完整”，而是“是否统一可预测”。只要项目里所有按钮相关 Block 都用 btn 前缀（btn、btn-group、btn-toolbar），就比强行“语义正确”更重要。

btn-group 里要不要定义 btn-group__item

不要。按钮组内部的按钮仍是独立的 btn Block，不是 btn-group 的子元素（Element）。

原因很直接：

• btn-group 只负责布局：控制间距、对齐、换行、响应式折叠等，它不决定按钮自身的尺寸、颜色、禁用状态
• btn 本身已具备完整交互与视觉语义，强行套一层 btn-group__item 会割裂它的复用性——比如你不能把一个 btn-group__item 拿出去单独用在表单里
• BEM 明确禁止“跨块嵌套”：btn-group__item 暗示这个按钮只属于组，但实际它可能同时出现在弹窗页脚、侧边栏操作区等多个上下文

正确写法是：

<div class="btn-group">
  <button class="btn btn--primary">确认</button>
  <button class="btn btn--secondary">取消</button>
</div>

按钮组的尺寸、方向等修饰符该加在哪一级

全部加在 btn 上，而不是 btn-group 上。

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

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

下载

常见错误是写 btn-group--lg，以为这样能让整个组“变大”。但问题立刻出现：

• btn-group--lg 无法精确控制每个 btn 的 padding、font-size、line-height —— 这些必须由 btn--lg 自身声明
• 如果组内按钮尺寸不一致（比如一个 btn--sm 和一个 btn--lg），btn-group--lg 就完全失效或产生歧义
• CSS 权重和覆盖逻辑变复杂：你得在 btn-group--lg 里再写一遍所有 btn 的尺寸规则，违背 BEM “样式归属唯一”的原则

所以，方向用 btn-group--vertical 是可以的（它只影响 btn-group 自身的 flex-direction 或 grid layout），但尺寸、颜色、状态等所有与按钮自身强相关的修饰符，必须落在 btn 上。

怎么处理按钮组里带图标的按钮

图标属于 btn 的一部分，用 btn__icon，不是 btn-group__icon。

例如：

<button class="btn btn--primary">
  <span class="btn__icon"><svg></svg></span>
  <span class="btn__text">导出</span>
</button>

这里 btn__icon 和 btn__text 都是 btn 的 Element，它们之间是平级关系，不是嵌套。不要写成 btn__text__icon（BEM 禁止元素嵌套元素），也不要提升到 btn-group__icon（这会让图标脱离按钮语义，失去可访问性和复用性）。

容易忽略的一点：btn__icon 必须和 btn 同时存在，不能单独使用；它的样式应通过 .btn__icon 直接定义，而不是依赖 .btn--primary .btn__icon 这种后代选择器——后者破坏封装，且一旦按钮状态变化（如 btn--disabled），图标样式容易失控。

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