直接写 .btn 会埋雷，因为它未声明归属、用途和状态，导致跨模块复用时样式冲突；bem 通过 block__element--modifier 强制显式上下文，确保语义唯一、结构可维护。
为什么直接写 .btn 会埋雷？
不是类名太短，而是它没说清“这个按钮属于谁、在哪用、什么状态”。.btn 在项目里可能被 header、card、form 各自塞进去，改一次样式，三处 UI 突然错位。BEM 不是加长名字，是强制显式归属——每个类名自带上下文。
常见错误现象：.btn-primary 看似合理，但一旦页面里出现两个不同逻辑的“主按钮”（比如表单提交 vs 模态框确认），它们就共享同一套样式，后续加 margin 或 font-size 必然冲突。
- Block 必须语义化且唯一：用
.search-form而不是.form，用.article-card而不是.card - Element 只能属于一个 Block：禁止出现
.header__btn和.modal__btn共用同一份 CSS；各自定义.header__action和.modal__confirm - Modifier 必须表达状态或意图：用
.button--loading，不用.button--blue；用.input--error，不用.input--big
.block__element--modifier 这串下划线和短横怎么不写错？
双下划线 __ 是硬性分隔符，表示“属于”；双短横 -- 表示“是某种状态”。写反或混用（比如 .block--element）会导致类名语义断裂，团队协作时没人敢动。
实际场景中容易漏掉层级判断：一个按钮在 .user-profile 里，它是不是该叫 .user-profile__cta？答案取决于它是否只服务于该模块。如果它会被复用到 .settings-page，那它就应该是一个独立 Block .profile-cta，而不是依附于 .user-profile 的 Element。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Block 名不能带位置信息：
.left-nav❌，应为.main-nav✅ - Element 名不能是纯视觉描述：
.btn-red❌，应为.btn--danger✅ - Modifier 可叠加但不可嵌套：
.btn--primary--loading允许，但.btn--primary__icon违反结构，图标应属.btn__icon，状态由.btn__icon--loading承担
HTML 结构必须和 BEM 类名严格对齐吗？
必须。BEM 不是命名游戏，是结构契约。如果 HTML 里写 <button class="search-form__submit"></button>，但 DOM 实际嵌套在 .header 下且未包裹在 .search-form 内，CSS 就失去上下文依据，后期维护者第一反应是“这样式为啥生效？”而不是“这结构哪来的？”
性能影响很小，但可维护性断崖下跌：没有结构约束的 BEM，和随便起个 .u-margin-top-sm 没本质区别。
- Block 必须有对应容器元素：
.product-list应包裹整个列表，不能只加在<ul></ul>上而漏掉标题或分页 - Element 必须直属于 Block：
.card__title不能出现在.card外层的<div> 里 <li>Modifier 类必须和 Block/Element 同级共存：<code><button class="btn btn--disabled"></button>正确；<button class="btn--disabled"></button>错误（丢失 Block 根） - React/Vue 中，组件名即 Block 名：
SearchBar→.search-bar，内部元素自然为.search-bar__input - 禁用动态拼接类名：
className={`${prefix}__item ${prefix}__item--${state}`}❌；应预设完整类名或用条件对象 - CSS-in-JS 里仍需保留 BEM 结构：
css`&.button--loading { ... }`比css`&[data-loading] { ... }`更易追溯
BEM 和 CSS-in-JS、Tailwind 怎么共存？
不冲突，但角色要分清。BEM 解决的是“这个样式属于谁”，而 Tailwind 解决的是“这个样式长什么样”。你在 React 组件里用 className="search-form search-form__input"，完全可搭配 class="w-full p-2 border"；但不要用 Tailwind 的 utility class 替代 BEM 的 Block 名。
最容易被忽略的点：组件库封装时，BEM 前缀必须透传。比如封装一个 Button 组件，它输出的 DOM 应该是 <button class="button button--primary"></button>，而不是让使用者自己拼 "button button--primary"——否则 Block 归属就散掉了。
