瀑布流布局必须依赖JS实现，BEM类名应表达业务意图而非技术方案，禁止使用--masonry等实现相关修饰符，gallery__item需自持盒模型边界并用状态类（如--loading）表达运行时状态。
瀑布流布局本身不支持原生CSS实现（column-count 有断行缺陷，grid 的 masonry 尚未全平台稳定），实际项目中基本依赖 JS 驱动（如 Masonry、CSS Grid + grid-template-rows: masonry 仅 Chrome 117+）或 Flex 模拟。BEM 组织必须先承认这个前提——类名不是为“纯 CSS 瀑布流”服务的，而是为可维护、可调试、可协作的 JS 驱动布局服务。
为什么不能用 masonry 修饰符命名瀑布流容器
Chrome 实验性 grid-template-rows: masonry 不是稳定标准，且无法通过 BEM 修饰符开关：它依赖整个 grid 容器的显式定义，.gallery--masonry 这种写法既不能触发该行为，也无法被工具链识别为有效修饰符。更关键的是，一旦你把布局逻辑藏进修饰符名里，团队会误以为“加个 class 就能跑”，结果在 Safari/Firefox 里完全失效，JS 回退逻辑又没对齐。
- 真正该暴露的是业务意图：
gallery（画廊）、product-grid（商品网格）、blog-post-feed（博客流），而不是实现方式 - 所有瀑布流容器都应统一用
display: grid或display: flex做基础布局，--masonry这类词禁止出现在 BEM 类名中 - 若需区分渲染模式，用
is-masonry-initialized这类运行时状态类（非 BEM 修饰符），由 JS 注入，CSS 里只做轻量样式微调
gallery__item 必须独立于容器布局逻辑
瀑布流的“项”不是子元素（child），而是参与列计算的“块级单元”。它的样式不能依赖父容器的 column-gap 或 grid-column 隐式规则，而要自带完整盒模型边界。
-
gallery__item必须设margin-bottom（而非靠父容器gap），否则 JS 计算高度时会漏掉间距，导致错位 - 禁止写
.gallery__item img { width: 100%; }—— 图片宽高比失准时会拉伸，应改用object-fit: cover+ 显式aspect-ratio - 如果项内含标题、操作按钮等，它们必须是
gallery__item__title、gallery__item__actions，但注意：gallery__item__title是合法的（item是 block），而gallery__item__content__meta是非法的（多层嵌套）
如何用 BEM 表达瀑布流的加载与占位状态
瀑布流常伴随懒加载、骨架屏、错误重试，这些状态必须通过 BEM 修饰符显式表达，且不可与布局类混用。
- 加载中：
gallery__item--loading→ 隐藏内容，显示gallery__item__skeleton（独立元素） - 加载失败：
gallery__item--error→ 显示gallery__item__error-message，并保留重试按钮gallery__item__retry-btn - 禁止用
gallery--loading这类容器级修饰符控制所有项——它掩盖了单个项的真实状态，JS 无法精准更新 DOM - 骨架屏元素必须带完整 BEM 路径：
gallery__item__skeleton，不能简写为skeleton或gallery-skeleton，否则 PurgeCSS 可能误删，VS Code 无法跳转定义
Flex 模拟瀑布流时，gallery--fluid 的正确写法
当用 Flex + JS 计算列高差模拟瀑布流（如早期 Masonry 回退方案）时，容器需要弹性伸缩能力，但修饰符不能泄露实现细节。
- ✅ 正确：
gallery--fluid→ 对应 CSS：.gallery--fluid { flex: 1; min-width: 0; }，只表达“是否参与父容器尺寸分配” - ❌ 错误：
gallery--flex或gallery--masonry-fallback→ 暴露技术栈，换用 CSS Grid 后类名即失效 - ❌ 错误：
gallery--col-3→ 把响应式断点写死在类名里，违背 BEM 修饰符应为布尔态/有限枚举的原则 - 列数切换应由媒体查询驱动：
@media (min-width: 768px) { .gallery { --gallery-columns: 2; } }，配合 CSS 自定义属性控制 JS 行为，而非靠类名硬编码
最易被忽略的是：瀑布流的“列”概念根本不存在于 HTML 结构中，它是 JS 运行时计算出的视觉分组。BEM 类名只能描述静态结构和明确状态，不能试图模拟动态列逻辑。一旦你开始写 gallery__column-1 或 gallery__item--col-2，就已脱离 BEM 原则——那不是组件化，是给 JS 输出打补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
