bem在flex布局中本质是锁死“谁控制布局、谁响应对齐、谁允许复用”三层关系；容器必须用业务block名（如product-grid），子项须带完整bem路径（如product-grid__item），对齐逻辑写在block或语义化modifier中，禁用技术类名与泛化element名。
直接说结论：BEM在Flex布局里不是加前缀的仪式，而是用类名锁死“谁控制布局、谁响应对齐、谁允许复用”这三层关系。写错一个类名，后续改flex-direction或换display: grid时就会连锁崩。
Flex容器类名必须是业务Block，不能是技术描述
常见错误是写flex-container、row、layout这类名字——它们不说明“这是商品列表”还是“导航菜单”，只暴露实现细节。一旦项目后期改用Grid，这些类名就失效，还掩盖真实模块意图。
- ✅ 正确：
product-grid、nav-menu、editor-toolbar，HTML里一眼可知职责 - ❌ 错误：
flex-row--centered，换布局后语义断裂，且--centered本该是Modifier，不该和容器名耦合 - ⚠️ 注意：
display: flex只写在CSS里，HTML中不出现任何技术词；全局.flex工具类禁止用于业务容器，它只适合纯辅助场景（如u-flex-center）
子项类名必须带完整BEM路径，禁用泛化element名
看到item、child、el这种类名，你就无法判断它属于哪个模块、能否单独渲染、是否已被其他组件覆盖。Flex子项脱离Block上下文后，样式极易错乱，调试时也找不到源头。
- ✅ 正确：
product-grid__item、nav-menu__link、form-field__input，CSS规则写.product-grid__item，不依赖父选择器 - ❌ 错误：
item、card-item（card-item不是BEM，缺少__分隔）、product__item（Block名应为product-list或product-grid，不能缩写） - ⚠️ 注意：如果
product-grid__item内部还需拆结构（如标题、价格），优先判断是否可独立成块；若仅在此处使用，可用product-grid__item-title；若标题要复用于详情页，则应拆为product-title独立Block
对齐逻辑必须写在Block规则或Modifier中，别塞给子项
justify-content和align-items是容器级职责，不是每个子项都要自己扛。靠margin-left: auto硬凑两端对齐，既难维护又违背Flex本意。
- ✅ 正确：
.nav-menu { display: flex; justify-content: space-between; align-items: center; }，所有nav-menu__link自然生效 - ✅ 特殊对齐用
align-self+Modifier：.nav-menu__link--align-bottom { align-self: flex-end; }，删掉类即回退，默认值不依赖cascade - ❌ 错误：
.nav-menu__link:last-child { margin-left: auto; }，DOM顺序一变就失效，且无法响应flex-direction: column - ⚠️ 注意：Modifier命名要语义化，
--spaced比--justify-between更可持续——未来用gap替代时，类名无需改动
Modifier必须可开关、不链式、不混样式
Modifier不是CSS属性映射器，它是状态开关。写button--bg-blue或card--padding-16等于把样式逻辑钉死在类名里，品牌色一变就得全局搜索替换。
- ✅ 正确：
button--primary、modal--fullscreen、list--stacked，Modifier只表达意图，不描述表现 - ❌ 错误：
button--primary--loading（链式叠加，BEM禁止），card--large（尺寸是响应式行为，非固有状态），text--fs-16px（违反语义原则） - ⚠️ 注意：多个Modifier必须并列使用：
button button--primary button--disabled；SCSS中禁用空格嵌套，只允许&__title和&--hovered，否则生成后代选择器破坏隔离性
最易被忽略的一点：BEM类名本身不参与运行时计算，getComputedStyle()查不到它。调试product-grid--spaced是否生效，唯一可靠方式是看DevTools Elements面板里的class列表是否实时增删——而不是盯着justify-content值猜它来自哪个类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
