card__title不能省略前缀，否则.title成全局选择器易导致样式冲突；BEM要求子元素显式归属，修饰符须依附块或元素名，响应式应通过媒体查询实现而非设备修饰符。
card__title这类命名为什么不能省略card__前缀
省略前缀会让.title变成全局选择器，一旦其他模块也用.title，样式就会互相覆盖。比如弹窗里有个确认，卡片的.card .title规则可能意外匹配它，导致字体、颜色错乱。
BEM要求所有直接子元素显式归属：card__title、card__image、card__footer-action。哪怕语义上“通用”，也必须加前缀——这不是冗余，而是锁定作用域。
- 错误写法：
<div class="card"><h3 class="title">→.title无上下文，易泄漏 - 正确写法：
<h3 class="card__title">→.card__title只属于card块 - 嵌套块禁止：
card__header__title❌，应为card__title✅（header不是独立块）
card--large和card__content--compact哪个写法合法
两者都合法，但含义完全不同：card--large是块级修饰符，影响整个卡片尺寸；card__content--compact是元素级修饰符，只缩紧内容区域的内边距或行高。
关键约束是：修饰符必须依附于明确的块或元素名，且不能孤立存在。单独写class="card--large"没问题，但class="--large"或class="content--compact"会失效——浏览器不报错，但CSS规则根本不会匹配。
立即学习“前端免费学习笔记（深入）”；
- 合法：
card--inverted、card__button--primary、card__tag--urgent - 非法：
card-large（缺--）、card__content--small-padding（修饰符名含描述性词，应抽象为--compact） - 响应式尺寸建议用
--compact/--spacious，而非--small/--large，避免与媒体查询逻辑冲突
如何让card__body适配移动端文字流而不破坏BEM结构
用@media直接改.card__body的padding或font-size完全没问题，BEM不限制媒体查询位置——它只管类名结构，不管响应式实现方式。
真正要防的是把响应式逻辑塞进修饰符里，比如为每个断点硬编码card--mobile。这会让HTML膨胀，且违背“修饰符表状态而非设备”的原则。
- 推荐：
@media (max-width: 768px) { .card__body { padding: 16px; } } - 避免：
<div class="card card--mobile">+.card--mobile .card__body { ... } - 插槽内容需隔离：
<div class="card__body"><div class="card__body-inner">{userContent}</div></div>，防止外部样式污染
为什么card__button不能写成独立的button块
因为card__button不是可复用的独立功能单元——它依赖卡片上下文：尺寸随card--large缩放、颜色受card--inverted影响、交互反馈绑定card:hover状态。抽成独立button块会切断这些耦合，导致样式不一致或JS逻辑断裂。
BEM判断标准很朴素：这个东西能否脱离当前块单独存在并被复用？如果答案是否定的，它就只能是元素，不能升格为块。
- card内部按钮：用
card__action或card__button，样式由card上下文控制 - 全局按钮：另建
button块，目录为/components/button/，与card无关 - 混用风险：
card__button里再套button__icon❌，应统一用card__button-icon
