子容器类名必须带完整BEM路径，如product-grid__item而非泛化命名item；Flex容器应按业务职责命名（如product-grid）而非实现方式；子结构优先独立为Block；修饰符需语义化表达意图而非映射CSS属性。
子容器类名必须带完整BEM路径，不能叫 item 或 child
看到 <div class="item"></div>，你根本不知道它属于哪个模块——是商品列表的项？导航菜单的项？还是表单里的选项？这种泛化命名在团队协作中极易引发样式覆盖或误删。
真正该写的是：<div class="product-grid__item"></div> 或 <div class="nav-menu__item"></div>。CSS 规则直接写 .product-grid__item，不依赖父选择器，也不靠层级嵌套生效。
- 子容器一旦脱离 Block 上下文（比如被单独渲染或复用），样式依然稳定可预期
- 调试时能直接从 DOM 定位到对应 CSS 文件，不用猜“这个
item到底是谁的” - 避免全局
.item被.cart-item、.editor-item等后续类名意外覆盖
Flex 容器本身就是一个 Block，别把它当“工具类”忽略
很多人把 flex-container 当成通用类反复复用，结果换布局时全得重写 HTML 和 CSS。其实 display: flex 是实现细节，不该出现在类名里。
正确做法是：按业务职责起名，比如 product-grid、nav-menu、editor-toolbar。这些名字让开发者一眼看懂“它干什么”，而不是“它怎么实现”。
立即学习“前端免费学习笔记（深入）”；
-
product-grid对应商品列表区域，样式只作用于该块，不污染其他地方 - 禁用
flex-container--centered这类命名——布局方式变了，类名就失效，还掩盖了真实意图 - 哪怕用了 CSS Modules 或 scoped CSS，
.flex这种局部类也因缺乏上下文无法追溯用途
子容器内部还要拆结构？优先判断是否该独立成 Block
比如 product-grid__item 里有标题、价格、操作按钮，别一股脑塞进 __title、__price 就完事。先问：这个“标题”是否可能在别处复用？是否需要独立控制状态（如高亮、禁用）？
如果答案是肯定的，它就应该是一个新 Block，比如 product-title，而不是 product-grid__item__title。
- BEM 不鼓励三层嵌套（Block__Element__SubElement），超过两层大概率说明结构设计过载
- 独立 Block 更易测试、复用和移交，比如
product-title可以在详情页、列表页、弹窗里共用 - 若确实只是视觉装饰（如图标、分隔线），再用 Element 命名，但必须带完整路径：
product-grid__item-icon
修饰符命名要语义化，别映射 CSS 属性
给子容器加变体时，别写 product-grid__item--align-right 或 --width-100 这种映射属性的修饰符。它们会随着布局演进快速过时。
应该表达业务意图，比如 product-grid__item--featured（置顶推荐）、--compact（紧凑模式）、--with-badge（带角标）。对应 CSS 只改行为，不写具体值。
-
.product-grid__item--featured { align-self: flex-start; }比--align-top更耐改 - 修饰符只开关状态或变体，不承担尺寸、颜色等视觉计算——那些交给 Block 或 Element 自身规则
- 响应式变化直接用
@media重写.product-grid__item，而不是堆一堆--mobile修饰符
product-grid__item 放在任何地方，都明确知道自己属于商品网格，且只响应这个网格定义的样式规则——这点比所有语法糖都重要。 
