Flex容器类名必须体现业务职责（如product-grid），不能叫flex-container等暴露实现的名字；子项必须用完整BEM路径（如product-grid__item），禁止泛化命名；对齐逻辑写在Block规则中，Modifier仅用于可开关的语义变体。
Flex容器类名必须体现业务模块职责，不能暴露flex实现细节；子项类名必须带完整BEM路径，禁止泛化命名；对齐逻辑应写在Block规则中，Modifier仅用于可开关的语义变体。
Flex容器类名为什么不能叫flex-container或row
这类名字把技术实现塞进HTML，掩盖了真实业务意图。比如flex-container--centered换成Grid布局后就失效，且无法回答“这个容器到底干啥”。
- ✅ 正确做法：用
product-grid、nav-menu、editor-toolbar等体现职责的Block名 - ❌ 错误做法：全局定义
.flex工具类，到处加className="flex"——改一处，三处崩 - ⚠️ 注意：
display: flex写在CSS里就够了，HTML只保留语义；CSS Modules下.flex哪怕局部作用域，也因缺乏上下文而无法追溯用途
justify-content和align-items该写在哪
它们属于容器级布局逻辑，不是每个子项都要自己扛。写在Block规则里，所有子项自然生效。
- ✅ 正确：
.nav-menu { display: flex; justify-content: space-between; align-items: center; } - ❌ 错误：给
nav-menu__item单独加margin-left: auto模拟右对齐，既难维护又违背Flex本意 - ⚠️ 单个项目需特殊对齐？用
align-self+ Modifier：.nav-menu__item--align-bottom { align-self: flex-end; }，删掉类就回退，默认值不依赖cascade
子项类名为什么必须是product-grid__item而不是item
看到item，你根本不知道它属于哪个模块、能否复用、是否允许单独渲染。脱离Block上下文后，样式极易错乱，调试时也找不到源头。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<div class="product-grid"><div class="product-grid__item"></div></div>，CSS写.product-grid__item，不依赖父类选择器 - ❌ 错误：
<div class="product-grid"><div class="item"></div></div>，.item全局污染，后续cart-item、nav-item都可能被覆盖 - ⚠️ 如果
product-grid__item内部还要拆结构（如标题、价格），优先判断是否可独立成块；若只在此处出现且无复用需求，可用product-grid__item-title
Modifier怎么命名才不算纯CSS属性映射
修饰符要表达业务意图，不是抄CSS属性名。比如--spaced比--justify-space-between更可持续——未来换gap实现也不用改类名。
- ✅ 推荐：
.button-group--spaced、.card--featured、.form-field--compact - ❌ 禁止：
--justify-center、--flex-column、--align-items-flex-end - ⚠️ 涉及
flex-direction变更的Modifier（如--stacked），必须同步调整justify-content和align-items的语义指向，否则交叉轴行为会反直觉
最常被忽略的是：Modifier必须可开关。删掉--spaced，布局立刻回退到默认值，不能靠cascade fallback或!important硬顶——否则调试时永远搞不清当前样式是谁给的。
