一个组件是否该拆为独立 block，取决于能否脱离当前上下文被复用；能则应为 block，否则仅为元素。状态类（is-）表通用状态，修饰符（--）表固定变体，禁止混用；嵌套超两层说明中间结构应升为 block；响应式应通过媒体查询直接作用于 block，而非添加设备后缀类名。
组件逻辑复杂时，先判断它该不该拆成多个 Block
一个组件是否“够格”成为独立 Block，不看它多复杂，而看它能不能脱离当前上下文被其他地方复用。比如价格展示区如果同时出现在商品卡片、购物车、订单页，且内部有划线价计算、会员价切换、货币格式化等逻辑，那它就该是 .price-display 块；但如果只是商品卡片里一行静态数字，那就只是 .product-card__price 元素。
常见错误现象：把整个表单页命名为 .form-page，然后所有字段都塞进 .form-page__input、.form-page__submit——结果加个“地址自动补全”功能时，发现没法单独复用，只能硬加 .form-page__input--address-autocomplete，类名开始膨胀。
- 正确做法：把地址输入抽成
.address-input块，它自带地理编码、校验、提示列表逻辑 - 原表单页只负责布局和流程串联：
.form-page__step+.address-input并列放置 - 判断依据：删掉父容器后，这个 UI 片段还能不能在弹窗、侧边栏或独立页面中直接使用？能，就是 Block
状态类（is-*）和修饰符（--*）别混用，业务意图必须可读
--loading、--error 这类修饰符是典型陷阱。它们描述的是前端执行过程，不是用户看到的业务事实。浏览器报错或网络超时，用户并不关心；他只关心“价格还没算出来”或“库存不足无法下单”。
真实场景中，同一个状态可能由不同技术路径触发：.price-display--pending 可能来自服务端延迟、WebSocket 推送未到、或本地缓存过期，但对 UI 来说，表现一致——显示“…”+禁用操作按钮。
- 用
is-类表达跨组件通用状态：如is-disabled、is-hidden，JS 控制开关，CSS 只做视觉映射 - 用
--修饰符表达固定变体：如.button--small、.price-display--compact，不随数据动态变化 - 禁止写
.price-display--loading，应为.price-display--pending或.price-display--calculating
嵌套层级深？说明子结构该升为 Block，不是改命名
出现 .card__body__list__item__link 这种四层下划线，本质不是命名问题，而是职责没切开。BEM 的 __ 只允许一级嵌套，即 Block 直接子元素。一旦你写了三层，说明中间那个“list”已经具备独立语义和复用可能。
比如仪表盘里的指标卡片列表，如果在报告页、监控页、移动端也复用，那它就不该是 .dashboard__main-content__metric-list，而应是独立的 .metric-list 块，HTML 中直接插入：<div class="dashboard"><div class="dashboard__main-content"><div class="metric-list"></div></div></div>。
- 避免
.dropdown__menu__submenu：二级菜单是另一个.dropdown实例，不是一级菜单的子元素 - 禁止
.steps__step__icon：每个.step应自包含图标、标题、状态，.step__icon即可 - 工具类不走 BEM：清除浮动用
u-clearfix，不写.block__content--clearfix
响应式不是靠类名后缀，而是靠媒体查询绑定到 Block 自身
.button--mobile、.header--tablet 这类类名是反模式。设备类型会变，设计系统也会变，但组件的业务角色不会变。按钮永远是按钮，header 永远是 header。
真正该做的，是在 Block 的 CSS 文件里，用媒体查询直接重写它的样式。比如 .price-display 在小屏下折叠单位、合并划线价和现价，就写：
@media (max-width: 480px) {
.price-display__unit { display: none; }
.price-display__old { font-size: 0.8em; }
}
这样改起来精准，不影响其他块，也不需要 JS 动态加删类名。
- 不要用
el.classList.add('price-display--compact@sm')：@ 不是合法类名字符，浏览器会截断或忽略 - 不要让 JS 控制响应式类：它和 CSS 媒体查询行为不一致，容易出现闪动或错位
- 复杂组件可用 CSS 自定义属性驱动：如
.price-display { --price-mode: compact; }，再在媒体查询中改值
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
