bem要求类名自包含且可脱离上下文独立生效，.card__title必须显式声明全部排版属性，单位统一用rem、line-height用无单位值，禁止!important；block需承载完整语义与行为边界，modifier只能作用于块根，html结构、css作用域和最小示例均需严格契约。
直接写 .button 或 .card__title 但没配齐完整样式，复用性就注定差——BEM 不是加下划线就能复用，它要求每个类名都自带“可脱离上下文独立生效”的能力。
为什么 .card__title 单独拿出来就失效
常见错误现象：把 .card__title 样式写成依赖 .card 的 font-family 或 color，结果挪到弹窗里字体变细、颜色发灰；或者只设了 margin-top，没声明 margin-bottom 和 line-height，一嵌套就错位。
根本原因在于：BEM 元素类不是“补丁”，而是“自包含单元”。.card__title 必须显式声明全部排版属性，包括 font-size、line-height、margin、color，不能靠继承或父级兜底。
- 所有尺寸单位统一用
rem，禁用em（避免被外层font-size连锁放大） -
line-height用无单位数值（如1.4），不写1.4rem - 禁止使用
!important，状态切换全靠添加/移除类（如.card__title--compact）
如何让 .search-form 真正跨页面复用
很多团队把搜索框写成 .header__search 或 .nav-search，结果在侧边栏或弹窗里复用时，样式断掉、提交逻辑失灵、清空按钮消失。
关键不是命名多规范，而是 Block 必须承载完整语义和行为边界：search-form 是唯一合法块名，且必须包裹 <form></form> 标签、带 name 属性、子元素仅限 search-form__input 和 search-form__button 直系子节点。
-
search-form__input必须设type="search"，否则 Safari 不显示原生清空按钮 -
search-form__button推荐type="submit"，保障回车键提交 - 图标不单独建
search-form__icon，应通过伪元素或内联 SVG 实现，避免为装饰性内容膨胀类名
修饰符 --modifier 放错位置的典型翻车点
看到 .card__title--large 就该警觉：标题尺寸不该由子元素自己决定，而应由整个卡片的状态控制，比如 .card--large 统一缩放内部所有元素。
Modifier 描述的是 Block 的状态，不是 Element 的局部开关。挂错位置会导致无法批量控制、响应式逻辑割裂、JS 状态同步混乱。
- 正确：
.card--featured、.button--disabled（作用于块根） - 错误：
.card__header--sticky、.button__text--uppercase（修饰符下沉到子元素） - 禁止拼接：
.card--featured--loading—— 多状态叠加应由 JS 控制类存在与否，而非靠类名堆叠
现有项目补 BEM 时最容易漏掉的硬约束
很多人改完类名就以为完工，但真正卡住复用的是三处隐性契约：
- HTML 结构必须严格对应：例如
.card__title只能是.card的直系子节点，嵌套一层<div class="card__content"> <h3 class="card__title"> 就语义断裂 </h3> <li>CSS 文件不能含任何全局重置（如 <code>h1 { margin: 0; }），所有规则必须只响应自身类名 - 每个 Block 目录下必须提供最小可用 HTML 示例（如
<div class="card"><h3 class="card__title">标题</h3></div>），并注明哪些修饰符可共存、哪些互斥
复杂点在于：BEM 类名本身不解决优先级冲突或伪类遗漏，.button--disabled:hover 这种组合必须显式定义，不能假设浏览器默认行为——复用时没人会帮你补这行 CSS。
