BEM本身不发布组件，只规范类名；真正可发布的最小单元是按BEM组织的HTML结构+CSS规则+明确块级边界三者合一。
直接说结论：BEM本身不发布组件，它只管类名怎么写；真正能发布的，是按BEM规范组织的HTML结构 + CSS规则 + 明确的块级边界，三者缺一不可。
为什么button__icon不能单独发布为组件
BEM里没有“独立元素组件”这个概念。button__icon只是button块的一部分，脱离button上下文就失去语义和样式归属。强行抽成独立包，会导致：
- 消费者必须手动拼接
class="button button__icon"，破坏封装性 -
button__icon样式依赖button的display、line-height等基础设置，单独引入CSS会漏掉这些 - 无法保证
button__icon在不同主题下自动适配颜色或尺寸——它没自己的状态契约
真正可发布的最小单元，永远是button这个块，包含button__text、button__icon、button--primary等全部子项和变体。
search-form这类块必须带<form>标签才能发布
不是所有带search字眼的UI都能叫search-form。BEM命名背后是行为契约，发布前必须验证：
立即学习“前端免费学习笔记（深入）”；
-
search-form必须包裹<form>标签，且含name属性（如name="q"），否则提交参数丢失 -
search-form__input必须设type="search"，否则Safari清空按钮、Chrome拼写检查禁用等原生能力失效 -
search-form__button推荐type="submit"，确保回车触发提交——这是可发布组件的底线交互保障
如果只是个带放大镜图标的输入框，就该叫search-input块，而不是冒充search-form。
发布时card--dark不能直接写死颜色值
修饰符card--dark是状态标识，不是样式终点。发布CSS时若直接写background: #1a1a1a，等于锁死主题，破坏可扩展性：
- 下游项目无法用CSS变量覆盖，比如想把
card--dark改成深蓝主题就得重写整个规则 - 服务端渲染时，首屏可能因CSS变量未注入而闪白
- 动态主题切换需要JS接管，但
card--dark本应是纯声明式状态
正确做法：card--dark只负责加类，所有颜色由:root里的--color-bg等变量控制，CSS中统一用background: var(--color-bg)。
目录结构必须和card块名严格对齐
组件库的文件系统就是BEM的物理映射。发布前检查：/components/card/目录下只能有：
-
card.css（含.card、.card__title、.card--featured等全部规则） -
card.html或card.tsx（只渲染card块及其直属子元素） - 禁止出现
card-icon.css或card-title.css——这些不是独立块，拆分会割裂语义
CI脚本应自动拦截grep -r "card__icon" components/button/这类跨块引用，这是发布前最后一道防线。
BEM可发布性的关键不在语法长度，而在每个__和--背后是否绑定了明确的行为契约和文件边界——类名写错浏览器不报错，但下游集成时才会暴露问题。
