一个element是否该升为block，只看它有无独立复用能力；拆得太细的典型信号是出现大量仅单上下文存在、无js状态或样式变体的__元素，如card__header__title中的__title若从未跨场景复用且无modifier，则不应是element，更不宜泛化为title block，而应归入已有block（如heading）。
一个Element是否该升为Block，只看它有没有独立复用能力
拆得太细的典型信号，是出现大量仅在单一上下文中存在、且无JS状态或样式变体的__元素。比如card__header__title里的__title，如果它从不单独出现在列表项、弹窗或侧边栏中，也没有--highlighted或--truncated等修饰符，那它大概率不该是Element——但更不该直接升成title这个泛化Block，而应检查它是否属于另一个已有Block（如heading）。
实操判断清单：
- 这个“子结构”是否在 ≥2 个不同父组件中以相同语义出现？→ 否，就别拆
- 它的HTML结构是否每次都要跟着父Block一起复制粘贴？→ 是，说明它还没脱离父级生命周期
- 你能否给它写一份独立的Storybook用例，不依赖
card也能渲染并测试交互？→ 不能，就还不是Block - 删掉它，父Block是否仍能表达完整功能？→ 如果
card__title没了，卡片还能叫“卡片”，那它只是装饰性文本，不是功能必需项
__嵌套超过一层，基本说明命名已失控
card__header__title或user-card__avatar__wrapper__inner这类写法，违反BEM扁平层级原则，也暴露DOM实现细节。BEM不认“子元素的子元素”，只认“Block的直系组成部分”。浏览器和工具链都不解析三层下划线，stylelint-selector-bem-pattern会直接报错，CSS Modules里styles['card__header__title']也会是undefined。
正确做法是归因而非嵌套：
- 如果
header本身有复用场景（页头、弹窗头、表单头），就把它升为header-block，原card__header__title变成header-block__title - 如果
title在各处都带图标+链接+状态徽标，那就该是独立headingBlock，而不是任何父级的附属 - 禁止用
__wrapper、__container、__inner这类无业务语义的词——它们只是开发者对DOM结构的妥协，不是用户能理解的功能点
Modifier出现在多个Block里，说明不该用Modifier而该抽工具类
当你发现button--error、input--error、alert--error同时存在，且样式几乎一样，那--error就不是某个Block的专属变体，而是跨组件的视觉状态。硬塞进每个Block的Modifier体系，只会让命名越来越碎、维护越来越难。
这时该做的是：
- 停用
--error修饰符，改用统一工具类is-error或has-error，配合CSS自定义属性控制颜色/边框/图标 - 把
button、input、alert各自保留语义化Modifier（如button--disabled、alert--success），只表达其自身状态 - 检查构建产物：
grep -r "button--error\|input--error" dist/，命中即说明工具类缺失，BEM正被滥用为样式补丁机制
类名长度 >40 字符且无法被业务方读出功能，就是拆过头了
product-card__price-display-section__current-price-value--with-currency-symbol这种名字，既没法在PRD里对齐“价格展示”这个交付项，也无法被产品或测试快速识别。BEM要求类名映射业务功能，不是记录HTML路径。
遇到长名，优先考虑：
- 是否误把CSS变量当类名用了？比如
--with-currency-symbol该由product-priceBlock通过content: var(--currency)注入，而非塞进类名 - 是否该用两个Block组合？如
product-price+currency-symbol，各自维护职责 - 是否在SCSS里过度嵌套导致生成冗余名？确认
.product-card { &__price { &__value { } } }没写成.product-card { &__price { & .product-card__price__value { } } }
最容易被忽略的地方：BEM不是越细越安全，而是越贴近业务边界越稳定。一个名字让人第一眼看不懂它要交付什么功能，那它就已经失去BEM存在的意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
