bem命名体系靠块名唯一、分隔符强制、修饰符语义化三条铁律落地；块名须根节点派生且全项目唯一，禁止拼接与动词命名，元素限直系子级，修饰符须可枚举、不涉视觉细节且不改变dom。
电商网站的BEM命名体系不是靠“设计一套规则”完成的，而是靠块名源头唯一、分隔符强制隔离、修饰符语义化这三条铁律落地的。写错一个 __ 或 --，就可能让商品卡片的 product-card__price--sale 被全局 .price 覆盖，或者让购物车按钮状态失效。
块名必须从组件根节点派生，且全项目唯一
电商里常见错误是把 product-list 和 product-item 当成两个块，结果写出 product-list__item ——但 product-item 本身就是一个可复用、可独立渲染的单元（比如能单独嵌入弹窗或邮件模板），它不该是列表的子元素，而该是独立块。
- 正确做法：每个组件只定义一个
BLOCK常量，如const BLOCK = 'product-card'→ 所有类名以product-card开头 - 禁止拼接命名：
cart-item__remove-btn是错的；cart-item是块，remove-btn应抽为独立块button或icon-button - 块名不用动词：
add-to-cart违反命名原则；应为add-button或更通用的cta-button，状态由修饰符控制
元素名不带父级语义，且仅限直系子级
product-card__image 合理，但 product-card__image__placeholder 就越界了——图片占位符如果复用在轮播图、头像等场景，它自己就是个块；如果只属于这张卡片，那它只是 product-card__image 的伪元素或内联样式，不该有独立类名。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 判断标准：删掉
product-card，这个类还能单独存在并被复用吗？不能，就是元素；能，就该是块 - 禁止三层嵌套：
checkout-form__step__title__link是反模式；应拆成checkout-step块 +checkout-step__title元素 - 元素不能脱离块使用：HTML 中必须同时出现
class="product-card"和class="product-card__title"，否则 BEM 结构失效
修饰符必须可枚举、不涉视觉细节，且只挂块或元素本身
电商最常踩的坑是用 product-card--red 表示促销色——主题切换时这个类就废了；或者写 product-card__price--discounted 却没配 JS 切换逻辑，导致样式永远生效。
- 修饰符值必须可预测：
product-card--featured✅，product-card--v2❌；button--primary✅，button--big-red❌ - 状态类优先挂根块：
cart--updating控制整个购物车禁用，而不是给每个cart__item加--disabled - 修饰符不改变 DOM：
product-card--loading只隐藏内容并显示骨架图，不插入新标签；如果需要额外结构（比如加载动画容器），说明它已超出当前块范畴，该拆新块
BEM 最难的部分不是语法，而是每次加新类名时，都要问一句：“这个类是否能脱离当前 HTML 结构单独存在？”——答案为否，就得重构。电商页面变动频繁，促销模块、AB测试变体、多端适配层，都会不断试探命名边界的弹性。一旦放任“临时类名”，整套体系就会在两周内开始松动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
