flex容器类名必须体现业务语义，如product-grid、nav-menu；禁用flex-container等暴露实现的命名，子项必须带完整bem路径如product-grid__item，避免全局污染与上下文丢失。
Flex容器类名必须体现业务语义，不能叫 flex-container
直接用 flex-container 或 row 这类名字，等于把实现细节塞进 HTML；后续换成 Grid、或改版时，类名就失效，还容易误删误改。真正该暴露的是“它干什么”。
- ✅ 正确：用
product-grid、nav-menu、editor-toolbar—— 团队一眼看懂职责，CSS 里只写display: flex即可 - ❌ 错误：全局定义一个
.flex工具类，到处加className="flex"；改个justify-content，卡片头、弹窗按钮组、表单栏全乱套 - ⚠️ 注意：即使用了 CSS Modules 或 scoped CSS，
.flex依然缺乏上下文——你永远不知道它是为撑开card__header，还是为居中操作按钮
子项类名必须带完整 BEM 路径，禁用 item 或 child
看到 <div class="item"></div>，你根本不知道它属于哪个模块、能否复用、是否允许单独渲染。Flex 子项一旦脱离 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；若标题要复用于详情页，则应拆为product-title独立 Block
justify-content 和 align-items 应写在 Block 规则里，别靠 margin 模拟
这些对齐控制属于容器级布局逻辑，应直接写在 Block 规则中，而不是靠后代选择器或硬编码 margin 模拟。否则既难维护，又违背 Flex 本意。
- ✅ 正确：
.nav-menu { display: flex; justify-content: space-between; align-items: center; }，所有nav-menu__item自然生效 - ❌ 错误：给
nav-menu__item单独加margin-left: auto来右推最后一个；这种写法破坏弹性行为，也掩盖了真实对齐意图 - ⚠️ 单个项目需特殊对齐？用
align-self+ Modifier：.nav-menu__item--align-bottom { align-self: flex-end; }；删掉类就回退，默认值不依赖 cascade
修饰符（Modifier）要表达业务意图，别映射 CSS 属性
修饰符不是 CSS 属性的转译器。用 --centered 或 --justify-between 这类命名，会让未来换用 gap 或 Grid 时类名失去意义。
- ✅ 推荐：
button-group--spaced表示子项等距分布，card--fluid表示参与流式伸缩；对应 CSS 只改布局行为，不嵌入像素值 - ❌ 禁止：
card--width-100或flex-container--column；这类名字绑定实现，换布局就得改 HTML - ⚠️
card--fluid对应的 CSS 应是flex: 1; min-width: 0;，不是width: 100%;—— 后者退回到传统盒模型，失去 Flex 弹性优势
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
