Flex容器必须是独立Block，子项需带完整BEM路径，对齐逻辑写在Block规则里；类名应具业务语义（如product-grid），禁用flex-container等实现细节命名，避免全局.flex工具类，Modifier须表达业务意图且可开关。
Flex容器必须是独立的 Block，子项必须带完整 BEM 路径，对齐逻辑写在 Block 规则里——不是“怎么命名”，而是“谁该负责什么布局职责”。
Flex 容器类名为什么不能叫 flex-container
它暴露实现细节，且业务语义全无。换成 product-grid、nav-menu 或 editor-toolbar，HTML 里一眼就知道模块干啥，CSS 里只写 display: flex 就够了。
- 全局定义
.flex工具类并到处加className="flex"，会导致改一处、三处崩：card 头变横排、modal footer 错位、按钮组对不齐 - CSS Modules 或 scoped CSS 下，
.flex即使局部作用域，也因缺乏上下文无法追溯用途——你永远不知道它是为撑开卡片头，还是为居中操作按钮 - 换用 Grid 布局后，
flex-container--centered这类名字直接失效，还掩盖了真实模块意图
justify-content 和 align-items 应该写在哪
直接写在 Block 规则里，比如 .nav-menu，而不是靠 Modifier 模拟或给子项硬加 margin-left: auto。
- ✅ 正确：
.nav-menu { display: flex; justify-content: space-between; align-items: center; }，所有nav-menu__item自然生效 - ❌ 错误：给
nav-menu__item单独加margin-left: auto来右推最后一个，既难维护，又违背 Flex 本意 - 单个项目需特殊对齐（如某个
nav-menu__item垂直居底），用align-self+ Modifier：nav-menu__item--align-bottom { align-self: flex-end; }，删掉类就回退，默认值不依赖 cascade
子项类名为什么必须是 product-grid__item 而不是 item
看到 item，你根本不知道它属于哪个模块、能否复用、是否允许单独渲染。Flex 子项一旦脱离 Block 上下文，样式极易错乱，调试时也找不到源头。
- ✅ 正确：
.product-grid__item，不依赖父类选择器 - ❌ 错误：
.item全局污染，后续cart-item、nav-item都可能被覆盖 - 如果
product-grid__item内部还要拆结构（如标题、价格），优先判断是否需独立成块；若只在 grid 里出现且无复用场景，可用product-grid__item-title；但若标题样式要复用于详情页，则应拆为product-title独立 Block
Modifier 类名该怎么写才不翻车
Modifier 不是 CSS 属性的映射，它得表达业务意图，且必须可开关、不干扰主逻辑。
- 禁止
.layout--justify-center这类纯属性名，改用语义化命名，如.layout--spaced（表示子项等距分布），未来换gap实现也不用改类名 - 涉及
flex-direction变更的 Modifier（如--vertical），必须同步调整justify-content和align-items的语义指向：.layout--vertical { flex-direction: column; justify-content: center; align-items: flex-start; } - 多个 Modifier 叠加时，
justify-content值会按声明顺序覆盖，所以一个容器最多应用一个对齐类；真需组合（如垂直居中+水平右对齐），用组合类名：.layout--center-y-end-x，并在 CSS 中明确定义其行为
最易被忽略的是：Flex 容器本身就是一个 Block，它的布局职责必须钉死在类名和规则里，而不是靠“临时加个 flex 类”来救火。一旦把 display: flex 当工具用，BEM 就退化成拼写游戏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
