Flexbox本身兼容性良好（Chrome 29+/Firefox 28+/Safari 6.1+/Edge 12+原生支持），真正问题在于类名语义混乱导致样式覆盖与调试断链；BEM规范要求容器类名必须是业务Block（如product-grid）、子项带完整路径（如product-grid__item）、对齐逻辑写在容器级规则中，禁用泛化名和CSS属性映射型Modifier。
Flexbox 本身没有兼容性问题（Chrome 29+/Firefox 28+/Safari 6.1+/Edge 12+ 都原生支持），真正出问题的从来不是 display: flex，而是类名语义混乱导致的样式覆盖、误复用、调试断链——BEM 在这里不是“加前缀仪式”，而是用类名锁死「谁控制布局、谁响应对齐、谁允许复用」这三层关系。
Flex 容器类名必须是业务 Block，不能叫 flex-container 或 row
这类名字暴露实现细节，且完全丢失业务语义。换成 product-grid、nav-menu 或 editor-toolbar，HTML 里一眼可知职责；CSS 中只写 display: flex 就够了，技术细节不该挤进 HTML 类名。
- ❌ 错误：
<div class="flex-container--centered">—— 换成 Grid 后类名失效，还掩盖真实模块意图 - ✅ 正确：
<div class="product-grid">—— 样式作用域明确，后续改flex-direction或切display: grid时，只需改 CSS，不碰 HTML - ⚠️ 全局
.flex工具类禁止用于业务容器；它只适合纯辅助场景（如u-flex-center），否则改一处，三处崩
子项类名必须带完整 BEM 路径，禁用 item、child 这类泛化名
item 这种名字无法说明归属，调试时找不到源头，也极易被其他模块的 .item 覆盖。BEM 要求每个子项都显式声明它属于哪个 Block，不靠 DOM 层级“猜”。
- ❌ 错误：
<div class="product-grid"><div class="item"></div></div>——.item全局污染，cart-item、nav-item都可能意外命中 - ✅ 正确：
<div class="product-grid"><div class="product-grid__item"></div></div>—— CSS 写.product-grid__item，不依赖父选择器，可独立复用 - ⚠️ 如果
product-grid__item内还需拆结构（如标题、价格），优先判断是否可独立成块；若仅在此处使用，可用product-grid__item-title；若标题要复用于详情页，则应拆为product-title独立 Block
justify-content 和 align-items 必须写在 Block 规则里，别塞给子项
这些是对齐逻辑的容器级职责，不是每个子项都要自己扛。靠 margin-left: auto 硬凑两端对齐，既难维护，又违背 Flex 本意，DOM 顺序一变就失效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
.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; }—— 不响应flex-wrap，也不适配 RTL，更无法被 JS 动态开关
Modifier 必须语义化，禁用 --justify-between 这类 CSS 属性映射名
修饰符回答的是“这个东西现在处于哪种可预期的状态”，而不是“我要给它加点什么 CSS”。命名要能经得起未来技术演进（比如以后用 gap 替代 justify-content: space-between）。
- ✅ 推荐：
.button-group--spaced—— 表达“子项等距分布”的业务意图，CSS 可用justify-content: space-between或将来改用gap - ❌ 禁止：
.button-group--justify-between—— 纯属属性搬运，换方案就得改类名，破坏向后兼容 - ⚠️ Modifier 不该单独存在：不能只写
button--large而不带button；也不能写button__icon--primary——primary是按钮状态，应为button--primary__icon
最常被忽略的一点：BEM 不是拼写游戏，而是一套协作协议——写错一个类名（比如把 product-grid__item 写成 product-item），后续改 flex-direction 或换 display: grid 时，就会连锁崩，因为样式归属关系已经松动了。
