bem 命名需以可复用业务功能为 block，类名须映射 prd 功能点；element 不可嵌套且须具独立语义；modifier 仅表达布尔状态，禁用具体值或上下文；命名过长应拆分 block 而非缩写。
Block 名必须是可复用的业务功能单元，不是视觉容器
“语义化”在 BEM 里不是指“看起来像中文”，而是指类名能直接映射到产品需求文档里的一个功能点。比如 search-form 对应“搜索框”这个交付项，user-card 对应“用户信息卡片”模块；而 section-2、left-sidebar 这类带位置或结构描述的命名，根本没法和 PRD 对齐，协作时只能靠口头解释。
常见错误是把 HTML 标签名当 Block：header、div、container 这些词没业务含义，header__logo 和 footer__logo 看似不同，但一旦抽离成独立组件，样式就可能互相污染。
- 每个 Block 应能单独交付、测试、复用，比如登录表单、筛选面板、商品卡片
- 命名统一用 kebab-case，全小写，不含数字或特殊字符（
user-profile✅，userProfile❌） - React 中建议定义常量：
const BLOCK = 'user-profile'，后续所有类名都基于它生成，避免拼写不一致
Element 必须直属于 Block，且具备独立语义
user-profile__avatar 合法，user-profile__avatar__icon 非法——BEM 不允许 Element 嵌套。是否需要新 Element，只看它有没有独立语义或复用可能。
比如头像旁的小徽标，如果是“VIP”标识，它有业务状态、点击行为、跨页面复用场景，就该升为独立 Block：badge；如果只是装饰性圆点，用修饰符更合适：user-profile__avatar--with-dot。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- Element 名必须是
block__element形式，双下划线__不可省略或替换 - 禁止冗余命名：
user-profile__user-profile-avatar❌，user-profile__avatar✅ - SCSS 中只允许单层嵌套：
.user-profile { &__avatar {} }，禁用&__avatar &__icon（空格会生成后代选择器）
Modifier 要表达状态或变体，不能绑定具体值
user-profile--compact 合理，user-profile--height-48 错误——后者把尺寸值塞进类名，设计改个高度就得改 HTML、CSS、JS 三处，还无法批量替换。
修饰符本质是开关，加/删它就能切换一组样式。比如 button--disabled 控制禁用态，card--loading 控制加载反馈，它们对应明确的交互状态，而不是视觉快照。
- Modifier 必须用双短横
--，不可用单短横或下划线（user-profile-compact❌） - 避免堆叠多个 Modifier：
user-profile--compact--dark--bordered→ 应收敛为 CSS 自定义属性控制外观 - 状态类名只保留布尔型：
user-profile--editable✅，user-profile--on-dashboard❌（这是上下文，不是状态）
类名过长时优先拆 Block，而不是缩写
看到 product-list__product-item__price-tag 就该警觉：三层下划线说明组件边界模糊。这不是命名太长的问题，而是 price-tag 其实具备独立语义——它出现在商品列表、购物车、订单详情页，有自己的颜色逻辑和点击反馈，理应是独立 Block。
缩写类名（如 pr-lst__itm__prc）只会让 DevTools 和代码审查更难理解，调试时完全看不出它在干啥。真正解法是划清职责边界。
- 判断标准就一条：这个子结构有没有自己的状态、行为或复用场景？有，就升为 Block
- 多个子元素共用同一状态时，提升到父 Block：
dashboard--is-loading，再用 CSS 批量控制 - 页面容器（如
dashboard-page）和功能 Block（如user-card）是组合关系，不是隶属关系，不要嵌套命名
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
