响应式图片网格容器必须使用语义化BEM类名，如user-avatar-grid；图片项需完整BEM路径；断点仅通过媒体查询控制grid列数；加载状态等应升格为独立Block。
响应式图片网格的容器必须是业务块，不能叫grid或gallery
直接写 class="grid" 或 class="gallery" 看似省事，但会导致三类实际问题：搜索时无法定位到具体模块（比如“用户头像墙”还是“商品图集”），样式容易被其他同名容器覆盖，后续换成 Flex 或瀑布流时类名全失效。BEM 要求容器名回答“它管什么”，而不是“它用什么技术”。
✅ 正确命名：user-avatar-grid、product-image-grid、testimonial-gallery
❌ 错误实践：image-grid（泛化，两个页面共用会互相干扰）、gallery-container（暴露实现，且container是无语义通用词）
⚠️ 注意：.user-avatar-grid 的 CSS 文件里只写 display: grid、grid-template-columns 和 gap，不掺杂 padding、max-width、background 等业务样式——这些应归属到更上层 Block（如 profile-section）。
每个图片项必须带完整 BEM 路径，禁止用孤立类名或 DOM 标签选择器
常见错误是 HTML 里写 <img class="item" alt="怎样在CSS响应式图片网格中落地BEM规范？" > 或 <figure class="image"></figure>，再靠 CSS 用 .user-avatar-grid img 统一控制。这等于放弃 BEM 的作用域隔离——调试时搜不到源头，JS 查询漏上下文，换图结构（比如改用 <picture></picture>）时样式直接断裂。
✅ 正确写法：<figure class="user-avatar-grid__item"></figure> + <img class="user-avatar-grid__image" alt="怎样在CSS响应式图片网格中落地BEM规范？" >
❌ 错误写法：<div class="item">（无归属）、<code><img class="user-avatar-grid__item__image" alt="怎样在CSS响应式图片网格中落地BEM规范？" >（三层嵌套，BEM 明确禁止）
列表项（__item）和媒体元素（__image）必须分层清晰。如果图片带标题、状态徽标或操作按钮，它们不是 __item 的子元素，而是独立 Block：avatar-badge、image-caption —— 不允许出现 user-avatar-grid__item__badge。
立即学习“前端免费学习笔记（深入）”；
响应式断点只改 grid-template-columns，不新增修饰符类名
BEM 类名描述的是语义角色，不是视觉排列。移动端把三列变单列，不是因为“它现在是 mobile”，而是因为“内容密度需求变了”。用 --mobile 或 --sm 命名修饰符，会导致 JS 切换逻辑错乱（比如桌面端手动加 --mobile 却期望生效），也堵死了未来加平板断点的路径。
✅ 正确做法：
– HTML 中始终用 class="user-avatar-grid__item"
– CSS 中用媒体查询控制列数：
@media (max-width: 768px) {<br> .user-avatar-grid { grid-template-columns: 1fr; }<br>}– 若需表达不同密度意图，用语义化修饰符：
user-avatar-grid--compact（由媒体查询统一启用/禁用），而非 user-avatar-grid--2col
⚠️ 注意：禁止在 HTML 中动态拼接类名如 user-avatar-grid__item--sm；所有响应式变化必须收口在 CSS 的 @media 块内，保证类名稳定可搜索。
图片加载状态、占位图、错误态必须升格为独立 Block
当 user-avatar-grid__item 内部需要处理加载中 spinner、空白占位图、404 fallback 图时，它已超出“一个布局单元”的职责，具备独立状态、可复用逻辑和自身样式边界。强行塞进父 Block 的 CSS 规则里，会污染作用域、增加耦合、阻碍复用。
✅ 正确做法：
– 定义独立 Block：image-placeholder、image-fallback、loading-skeleton
– HTML：<div class="user-avatar-grid__item"><div class="image-placeholder"></div></div>
– CSS：所有样式只写在 _image-placeholder.scss 里，不依赖 .user-avatar-grid 上下文
❌ 错误做法：user-avatar-grid__item__placeholder（三层嵌套）、.user-avatar-grid__item .image-placeholder（隐式依赖，违背 BEM “样式只属于一个 Block” 原则）
复杂点在于：这类子 Block 往往没有独立 DOM 容器，容易被当成“装饰性元素”忽略其语义价值。一旦图片加载失败，你得能快速定位到是哪个 Block 的 fallback 逻辑出了问题——而只有独立命名才能支撑这种调试路径。
