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→ 必须在galleryBlock内才生效 -
gallery__image--loading→ 仅修饰该元素，不影响gallery__caption - 全局搜
gallery__就能定位全部子元素，不会误触其他模块
gallery__item里要不要再嵌套BEM子元素
要，但只限一级嵌套。比如缩略图预览功能，别写gallery-thumb-item，而是：
<div class="gallery__item">
<img class="gallery__image" src="...">
<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这类视觉密集型组件，一旦类名松散，后续加懒加载、键盘导航、焦点管理时，样式冲突和调试时间会指数级上升。
