bem要求状态修饰符必须绑定到具体块或元素上，如gallery__thumb--active；尺寸应通过语义化修饰符（如--square、--wide）控制而非硬编码数值；图片加载需用placeholder/loading/loaded等状态类协同js避免闪动；修饰符命名须遵循单一职责、块内独立、描述状态而非功能。
缩略图和大图如何用BEM区分状态
不能靠 .thumbnail 和 .large-image 这种孤立类名硬切——BEM 要求状态必须绑定到具体块或元素上，否则后续加交互（比如“当前选中”“加载中”“错误”）时极易冲突或不可维护。
正确做法是把画廊视为一个块（gallery），缩略图和大图分别是它的子元素：gallery__thumb 和 gallery__main。状态通过修饰符附加，例如：
.gallery__thumb--active<br>.gallery__main--loading<br>.gallery__main--error
关键点在于：状态修饰符永远依附于已有元素，不单独存在；--active 意味着“这个缩略图当前被选中”，而不是“所有缩略图都该有 active 样式”。
为什么不能给 gallery__thumb 直接写 width: 100px
BEM 不反对写尺寸，但反对在元素层级固化具体数值——因为缩略图可能出现在网格、横向滚动区、甚至弹窗预览里，不同上下文需要不同宽高比和尺寸约束。
推荐拆解为语义化修饰符：
-
gallery__thumb--square→aspect-ratio: 1 / 1 -
gallery__thumb--wide→aspect-ratio: 16 / 9 -
gallery__thumb--small→width: 64px; height: 64px
这样 HTML 里写 <div class="gallery__thumb gallery__thumb--square gallery__thumb--small"> 就能组合控制，CSS 也更容易被 PurgeCSS 或原子化工具识别剔除。
<h3>
<code>gallery__main 的图片加载状态怎么避免闪动和布局偏移
大图容器（gallery__main）如果只靠 <img> 的 src 切换，会触发重排+重绘+网络延迟，用户看到白块或跳动。BEM 本身不解决这个问题，但它的结构让 JS 控制更清晰：
- 初始状态用
gallery__main--placeholder显示骨架或占位色块 - 加载中加
gallery__main--loading，配合opacity: 0.6+pointer-events: none - 成功后移除所有状态类，仅保留
gallery__main--loaded用于触发动画（如淡入）
注意：不要用 gallery__main--loaded 控制宽高或显示隐藏，那属于结构职责，应由父容器或 CSS 容器查询兜底。
修饰符命名容易踩的三个坑
BEM 修饰符不是形容词堆砌场。真实项目里最常错的是：
- 用功能代替状态：写
--clickable而非--interactive—— 后者描述视觉/行为契约，前者只是实现手段，换键盘操作就失效 - 混用布尔与值型修饰符：同一元素同时出现
--active和--size-large是 OK 的，但--active-large就违反单一职责 - 跨块复用修饰符名：
button--disabled和gallery__thumb--disabled必须独立定义样式，不能靠通用--disabled类全局覆盖，否则破坏块封装性
真正难的不是写对名字，而是每次加新修饰符前，得问一句：这个状态是否只在此块内有意义？它会不会被其他块无意覆盖或误解？
