bem本身不自动带来可复用性，真正起作用的是对块边界的严格定义和对元素、修饰符的契约式约束；组件目录、文件名、类名、导出名须完全一致，__与--不可混淆，html仅限单bem类名，所有变体必须通过modifier表达。
直接说结论：BEM本身不自动带来可复用性，真正起作用的是对块（Block）边界的严格定义和对元素（Element）、修饰符（Modifier）的契约式约束。写错一个__或--，或让button__icon脱离button存在，复用就立刻失效。
组件目录结构必须与BEM块名严格一一对应
每个组件目录名就是它的Block名，全小写、中划线分隔，且仅允许存放归属该块的文件。
-
/components/button/下只能有button.css、button.tsx、button.test.tsx等——多一个icon.css或card.tsx，CI就会报错 - 禁止把
button__icon抽成独立目录/components/icon/：它不是Block，只是button的一部分，强行拆分等于撕毁模块契约 - 文件名、导出组件名、CSS Block类名三者必须一致：
Button.tsx→ 导出Button→ CSS里只用.button，不能是.btn或.ui-button
元素（__）和修饰符（--）的使用边界必须清晰
混淆__和--是最常见的“静默失效”原因：浏览器不报错，但样式不生效或意外覆盖。
-
button__text合法，button__text__highlight非法——Element不允许嵌套Element -
button--disabled合法，button__text--large非法——--只能修饰Block或其直属Element，不能降级到子元素内部 -
button--primary和button--large可叠加，但button--small和button--large互斥，文档必须明确标注⚠️冲突规则 - 常见翻车点：
dialog__header__title应为dialog__title；card--in-sidebar越界，应拆成新Blocksidebar-card
HTML中每个元素只允许一个BEM类名
混入工具类（如text-center）、全局布局类或跨块类，会破坏BEM的语义闭环，让下游开发者无法判断样式归属。
- 正确写法：
<button class="button button--primary"></button>，而不是<button class="button button--primary text-lg flex items-center"></button> - 所有视觉变体必须通过Modifier表达，而非依赖外部上下文：禁止
.card .button这类后代选择器，改用card__button - SCSS中禁用非
&__/&--的嵌套：& > span或&.is-active全部被stylelint-selector-bem-pattern拦截 - 构建时若用
cssnano压缩，需注意它可能合并简写属性导致button--large的padding被覆盖——Modifier规则必须独立声明，不依赖权重
最容易被忽略的其实是物理边界：BEM文档里没写清button__text必须是button的直接子节点，开发者套了<div><span class="button__text">，样式就断链了。契约不在代码里，而在人脑和文档的同步上。</span></div>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
