BEM在电商项目中是为解决样式与逻辑耦合问题，必须HTML显式声明完整类名、合理拆分Block、函数化生成类名、规范使用Modifier。
大型电商网站用BEM不是为了“看起来规范”，而是不这么干，两周后就没人敢动首页价格样式了——改一个 product-card__price，搜索页、购物车、弹窗推荐位的价格全变色，因为它们共享了同一套未隔离的类名逻辑。
为什么电商项目里不能只改类名，必须重构HTML结构
常见错误是把旧代码 .price 直接替换成 product-card__price，但保留原有嵌套结构：<div class="product-card"><div class="price">¥99</div></div>。这看似合规，实则埋雷：
- HTML里没显式声明
product-card__price，靠CSS选择器.product-card .price模拟作用域——一旦其他模块也用了.price，就覆盖失效 - JS脚本可能通过
document.querySelector('.price')取值，结果在分类页、详情页、弹窗里拿到的全是同名节点，逻辑错乱 - 组件复用时（比如把商品卡片塞进邮件模板），
.product-card .price在无父级product-card的上下文中完全失活
正确做法：HTML中每个元素必须带完整BEM类名，且仅含一个Block相关类：<div class="product-card"><div class="product-card__price">¥99</div></div>。不依赖层级，只依赖类名本身可识别、可定位、可抽取。
分类页里哪些该拆成独立Block，而不是塞进一个category-tree
电商分类页常被误当作“一棵树”来写，结果 category-tree__item__subitem__trigger 这种非法三层命名满天飞，还导致广告位、筛选栏、分页器全耦合在一个CSS文件里。
立即学习“前端免费学习笔记（深入）”；
-
category-filter：筛选控件（价格滑块、多选标签、排序下拉），它和分类列表数据源不同、交互逻辑独立，必须拆出 -
category-item：单个可点击分类项（含图标、文字、角标），支持category-item--has-children和category-item--active，不关心自己在哪棵树里 -
category-dropdown：子类展开面板，应复用通用dropdown__menu，仅加dropdown--in-category微调定位，而非重写一套 -
category-ad-banner：广告位有独立埋点、渲染策略、响应式断点，硬塞进category-tree会导致JS状态管理爆炸
关键判断标准：这个UI单元是否能脱离当前页面，在订单页、搜索页、APP弹窗里被单独引用？能，就是Block；不能，说明它还没切到合理边界。
Sass里手写BEM类名容易踩的坑
纯手敲 product-list__item--loading，漏一个下划线或拼错 product-listt，编译不报错，但样式死活不生效，排查成本远高于写错逻辑。
- 禁止直接拼字符串：
.product-list__item--loading手滑写成.product-list_item--loading（单下划线），浏览器忽略，毫无提示 - 避免嵌套生成器滥用：Sass里用
&__item { &--loading { ... } }看似省事，但一旦需要跨Block复用（比如search-result__item也要同款loading态），就得复制整段逻辑 - 推荐用函数封装：
@function bem($block, $element: null, $modifier: null)，调用时写@include bem('product-list', 'item', 'loading')，拼写交给函数校验 - 更稳妥的做法：配合PostCSS插件（如 postcss-bem）或构建时生成类型定义（TypeScript + CSS Modules），让IDE能跳转、能补全、能报错
修饰符（Modifier）什么时候该用 --，什么时候不该用
修饰符不是“所有变化都加--”，它的唯一职责是表达「状态」或「外观变体」，且必须依附于Block或Element存在。
- ✅ 合规：
button--disabled、product-card--featured、header__logo--dark—— 描述明确状态，且和主体类共存 - ❌ 错误：
button--blue—— 颜色属于主题系统，应抽到theme-dark或theme-brand层，而非塞进组件修饰符 - ❌ 错误：
button--onClick—— 行为逻辑不该出现在CSS类名里，JS事件绑定和类名切换要解耦 - ❌ 错误：
button--primary--large—— 多修饰符叠加语义模糊，应拆成button--primary button--large，允许独立开关
最易被忽略的一点：Modifier永远不能单独使用。写 <button class="button--primary"></button> 是无效的，必须是 <button class="button button--primary"></button>。否则，当某天你删掉 .button 基础样式时，整个按钮就彻底不可见了——而这种问题在线上环境极难定位。
