应使用语义化bem修饰符（如--square）控制图片展示形态，响应式逻辑交由css媒体查询和aspect-ratio处理，资源选择通过+srcset实现，类名不暴露断点或设备细节。
不能用 img--responsive 或 picture--sm 这类笼统类名控制响应式图片——它把尺寸、设备、加载状态全搅在一起，后续改断点、换图源、加骨架屏时，类名就失控了。
为什么修饰符里不能出现 @md、--sm 这类断点标识
这类写法直接把 CSS 媒体查询的实现细节暴露到 HTML 类名里，违背 BEM “不暴露实现”原则。一旦设计稿调整断点值（比如从 768px 改成 744px），你得同步改所有模板里的类名、JS 切换逻辑、CSS 规则——三处漏一就出 bug。
常见错误现象：
-
product-card__image--mobile在 CSS 里对应@media (max-width: 480px)，但组件实际要适配折叠屏，又得新增--foldable - 用 JS 监听
window.innerWidth动态加--desktop，却没节流、没处理 orientationchange，resize 时疯狂重绘 - 服务端渲染时无法判断设备宽度，SSR 输出的类名和客户端不一致，触发 FOUC 或 layout shift
正确做法：用语义化修饰符 + 独立媒体查询
尺寸相关修饰符只表达“它看起来像什么”，不表达“在哪儿显示”。比如 product-card__image--square 意味着“这张图按正方形比例展示”，具体怎么缩放、是否占满容器，交给 CSS 的 @media 和 aspect-ratio 控制。
实操建议：
- 块名必须绑定具体组件，如
hero-banner__bg、user-avatar__photo，禁用泛称img或responsive-img - 尺寸修饰符只用语义词：
--square、--wide、--portrait，不带数值或单位 - 真正响应式逻辑写在 CSS 里，例如：
@media (max-width: 768px) { .product-card__image--square { width: 100%; } } - 若需更细粒度控制（如不同 DPR 下换图），用
<picture></picture>+srcset，BEM 类名不参与资源选择
如何配合 <picture></picture> 和 srcset 使用 BEM
BEM 不管图片资源怎么选，只管“这张图在页面里扮演什么角色”。所以 <picture></picture> 的结构和类名要对齐组件职责，而不是去模拟 media query。
示例（合法）：
<div class="product-card__image product-card__image--square">
<picture><source media="(min-width: 1024px)" srcset="hero-large.webp" type="image/webp"><source srcset="hero-small.webp" type="image/webp">
@@##@@
</source></source></picture>
</div>
关键点：
- 外层容器用 BEM 类名（
product-card__image--square）控制布局和状态 -
<picture></picture>内部不加任何 BEM 类名——它只是资源切换器，无样式职责 -
<img src="hero-small.jpg" alt="Product">标签保留alt和 fallback，但不单独加修饰符；加载状态由外层容器类（如--loading）统一控制 - 避免给
<source></source>加类名，它不参与渲染，加了也无效
容易被忽略的边界：max-width: 100% 和 width: 100% 的位置
对 <img> 元素，width: 100% 是危险操作——它强制拉伸，可能远超原始分辨率；而 max-width: 100% 才是安全底线。但仅靠它还不够，尤其当父容器是 flex/grid 且未设宽高约束时。
实操建议：
- 基础规则：所有
<img>默认加max-width: 100%; height: auto; - 若外层容器（如
product-card__image）已设aspect-ratio，<img>可加object-fit: cover，但该样式写在块级规则里，不靠修饰符开关 - 禁止在修饰符里写
--full-width并让它触发width: 100%—— 这会让同一张图在不同上下文失去比例控制 - 真正需要“铺满”的场景（如 banner 背景图），改用
<div> + <code>background-image，并定义新块名如hero-banner__bg最常被绕开的点是：BEM 类名永远不决定“用哪张图”，只决定“这张图该怎么展示”。资源选择交给 HTML 属性，布局控制交给 CSS 媒体查询，状态管理交给独立修饰符——三者松耦合，才能扛住需求迭代。
