bem中gallery是block，子元素必须用gallery__前缀，修饰符统一用gallery--；禁用gallery-item等混用写法，因gallery__image能确保作用域隔离、权重可控、搜索精准且支持一级嵌套与规范修饰符。

Gallery组件的BEM类名怎么起才不混乱

直接说结论：BEM里gallery是Block，所有子元素必须用gallery__前缀，修饰符统一用gallery--，绝不能出现gallery-item或gallery-thumb这种“连字符混用”或“脱离双下划线”的写法——这是BEM最常破戒的地方。

为什么gallery__image比gallery-image更安全

因为BEM的核心是“可预测的命名作用域”。一旦用gallery-image，就和card-imagehero-image失去隔离，CSS权重、复用性、搜索定位全受影响。而gallery__image天然绑定上下文：

• gallery__image → 必须在gallery Block内才生效
• gallery__image--loading → 仅修饰该元素，不影响gallery__caption
• 全局搜gallery__就能定位全部子元素，不会误触其他模块

gallery__item里要不要再嵌套BEM子元素

要，但只限一级嵌套。比如缩略图预览功能，别写gallery-thumb-item，而是：

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

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

下载

<div class="gallery__item">
  @@##@@
  <button class="gallery__trigger">放大</button>
  <div class="gallery__overlay">
    <span class="gallery__label">风景</span>
  </div>
</div>

注意：gallery__overlay仍是Block级子元素，不是gallery__item__overlay——BEM不鼓励多层嵌套，否则维护成本陡增，也违背“一个Block一个职责”原则。

响应式和状态类名怎么加才不破坏BEM结构

用修饰符（Modifier），不是新Block。常见错误是写gallery-mobile或gallery-is-open，正确做法是：

• 设备适配：gallery--compact（代替gallery-mobile），靠媒体查询控制
• 交互状态：gallery--active（非is-active），由JS切换class
• 避免混合：gallery--compact gallery--active合法；gallery__item--active也合法，但gallery__item-active非法

BEM的抽象力不在“多漂亮”，而在“改一个类名就知道它在哪、影响谁、能不能删”。Gallery这类视觉密集型组件，一旦类名松散，后续加懒加载、键盘导航、焦点管理时，样式冲突和调试时间会指数级上升。

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