flex容器类名必须体现业务语义（如product-grid、dashboard-layout），禁用flex-container等暴露实现的命名；子项须带完整bem路径（如product-grid__item），对齐逻辑写在block规则中，修饰符应语义化（如--fluid）而非映射css属性。
Flex容器类名必须体现业务语义，不能叫flex-container
直接用flex-container或row这类类名，等于把实现细节塞进HTML，后续换成Grid或重新设计布局时，类名就失去意义，还容易引发误改。真正要暴露的是“它干什么”，比如product-grid、dashboard-layout、editor-toolbar——这些名字让团队一眼看懂模块职责，CSS里只写display: flex就够了。
常见错误是全局定义一个.flex工具类，到处加className="flex"。结果改个justify-content，卡片头、弹窗按钮组、表单提交栏全乱套。BEM不是拼写游戏，是靠类名锁定样式归属关系。
-
product-grid对应商品列表容器，样式只作用于该块，不污染其他地方 - 避免
flex-container--centered这种命名：换布局后类名失效，还掩盖了真实模块意图 - 在CSS Modules或scoped CSS下，哪怕
.flex局部有效，也因缺乏上下文无法追溯用途——你永远不知道它是为撑开卡片头，还是为居中操作按钮
流式宽度控制必须交给flex属性，别碰width
Flex容器的尺寸由父容器决定，width: 100%或max-width在display: flex下多数无效（除非是inline-flex或flex-direction: column且父容器有明确高度）。更关键的是：硬写width会和flex: 1等自动分配机制冲突，导致溢出或被忽略。
典型错误：.card__content { width: 100%; flex: 1; }——主轴方向上width基本不起作用，反而干扰调试。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
flex-basis、min-width、max-width配合flex-wrap控制流式行为 -
flex-shrink: 0必须显式设置，否则小屏下内容可能被压缩到不可读 - 修饰符如
card--fluid应表达“是否参与流式布局”，而不是“宽多少”
BEM修饰符只开关布局行为，不写具体像素值
修饰符命名要表达业务意图，比如card--fluid比card--width-100合理，因为它描述的是“卡片是否允许伸缩”，而非视觉尺寸。对应CSS应只改布局行为，不嵌入计算逻辑。
正确写法：.card--fluid { flex: 1; min-width: 0; }；错误写法：.card--fluid { width: 100%; }——这退回到传统盒模型，失去Flex弹性优势。
- 最大宽度限制应统一放在Block级规则里：
.card { max-width: 1200px; margin: 0 auto; } - 修饰符只负责“是否允许伸缩”，不承担像素计算，否则响应式逻辑就散落在各处
- 列数切换靠
flex-wrap+min-width配合，而不是媒体查询里反复改flex-basis
子项类名必须带完整BEM路径，禁用泛化名item
看到<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都可能被覆盖。
- 子项类名必须以Block名开头，禁止
item、child这类泛化命名 - 对齐逻辑写在Block规则里，比如
.nav-menu { justify-content: space-between; }，别靠margin-left: auto硬凑 - 单个项目需特殊对齐？用
align-self+ Modifier：.nav-menu__item--align-bottom { align-self: flex-end; }
width的老路。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
