判断子结构该为element还是独立block，核心标准是删除父容器后能否被其他上下文原样复用：能则为block（如price-badge），不能则为element（如product-card__badge）；修饰符应离散互斥、避免堆叠，优先用CSS自定义属性替代冗余类名。
别靠缩写、别堆修饰符、也别硬塞所有上下文进类名——BEM 类名变复杂，根本不是命名规则的问题，而是组件边界和状态归属没理清。
怎么判断一个子结构该是 __element 还是独立 block？
核心就一条：删掉父容器后，它还能不能被其他地方原样复用？能，就是 block；不能，才是 __element。
- 价格组件里带“限时5折”角标？如果这个角标在商品列表、购物车、订单页三处都出现，且有自己的动效/文案逻辑 → 它该是
price-badge，不是product-card__badge - 表单里的邮箱图标，如果在登录、注册、忘记密码页都复用 → 提炼为
input-icon，加修饰符如input-icon--email - 仪表盘里一堆卡片组成的网格区域？别写成
dashboard__main-content__card-grid→ 直接用card-grid块，内部元素走自己的card-grid__item
为什么 --loading 这类修饰符容易让类名失控？
因为它们暴露的是 JS 实现细节，而不是业务状态。一旦多个子元素都要响应“加载中”，就会冒出 dashboard__header--loading、dashboard__chart--loading 这种重复。
- 正确做法是把状态提升到父级：
dashboard--is-loading，再用 CSS 批量控制：.dashboard--is-loading .dashboard__header - 修饰符必须离散、互斥、可枚举：最多保留
--primary、--disabled、--sm等 5 个以内，禁用--very-big-and-centered这种描述性短语 - 如果修饰符只控制颜色/圆角/间距等变量，直接用 CSS 自定义属性替代：
button+style="--button-color: #dc3545"，比button--theme-danger--size-lg更可控
编辑器和构建工具怎么配合减少“眼花”？
长类名本身不致命，致命的是人眼拆解不出层级、编辑器不识别 __ 和 -- 的语义分隔。
立即学习“前端免费学习笔记（深入）”；
- VS Code 装 Highlight 插件，配置正则高亮：
(\w+)__(\w+)标出元素，(--\w+)标出修饰符，一眼区分结构 - 禁用 SCSS 中嵌套生成非法选择器：不允许
&__title { &__icon { } }，防止产出.card.is-open__title这类反模式 - PurgeCSS 等工具对原生 BEM 名称识别更准，缩写反而容易误删；Gzip 对重复前缀（如
user-card__）压缩效率高，实测类名变长 20% 后体积反而下降 15%～25%
真正难的不是写短名字，而是敢把一个“看起来很像子元素”的东西单独拎出来当 block 维护——哪怕它目前只在一处用到。组件职责模糊了，类名才会长得像身份证号。
