卡片标题该用__title，仅承载主标题时；含标题+副标等组合信息则用__header。按钮需依上下文加card__前缀，禁用三级嵌套如card__title__link，响应式应避免--mobile而用语义化修饰符如--compact。
卡片标题该用 __title 还是 __header？
看语义，不是看视觉样式。如果这个区域只承载主标题文字（比如新闻卡片的 headline），用 __title 更准确；如果它包含标题+副标+时间等组合信息，实际是卡片的“头部容器”，那就该用 __header —— BEM 的 __ 后缀描述的是功能角色，不是字体大小或 margin 值。
常见错误是看到 UI 上有个大号字就写 card__title，结果后面加了个 <span class="card__subtitle"></span>，逻辑上就断层了：subtitle 不是 title 的子元素，而是同级内容。这时应该统一收进 card__header，再让 card__header-title 和 card__header-subtitle 各司其职。
按钮在卡片里要不要加 card__ 前缀？
要，但得看它是否具备卡片专属行为。纯通用按钮（比如全局复用的 btn btn--primary）可以不加；但如果这个按钮的样式、状态或交互逻辑和卡片强绑定（例如“收藏”按钮会改变卡片整体状态，或悬停时卡片边框同步高亮），就必须走 card__button 或更精确的 card__favorite-button。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先定义一套基础按钮类（如
btn），再用 BEM 修饰它的上下文：card__button btn btn--secondary - 避免写
card__btn这种模糊命名，btn是实现细节，button才是语义 - 如果按钮有图标+文字组合，别拆成
card__button-icon+card__button-text，除非它们需要独立控制；多数情况用card__button包裹原生button内部结构即可
card__title 里还能不能再嵌 __？
不能。BEM 规则明确禁止三级下划线嵌套，比如 card__title__link 是错的。正确做法是提升层级：如果标题里有可点击的链接，应该写成 card__title-link —— 它和 card__title 是平级元素，都属于 card 的子元素。
为什么？因为 __ 表示“属于某个块的直接组成部分”，而 card__title 本身不是块，不能作为父级去定义子元素。否则会导致：
- 样式作用域混乱（你改了
card__title的 padding，结果card__title__link的垂直对齐全乱） - JS 选择器耦合过重（
document.querySelector('.card__title__link')一旦title类名变更就失效） - 组件复用困难（把
card__title单独抽出去当独立组件时，__link就失去上下文）
响应式场景下要不要加 --mobile 修饰符？
不要直接加 card__title--mobile。修饰符（--）应该描述状态或变体，比如 --disabled、--compact，而不是设备断点。移动端适配应通过媒体查询作用于已有类，或用更语义的修饰符如 card__title--condensed，再在 @media (max-width: 768px) 里激活它。
真正容易被忽略的是：卡片内按钮的文字大小、行高、内边距在小屏下往往需要整体收紧，这时候与其给每个元素加 --mobile，不如用一个统一的上下文修饰符 card--compact，然后批量控制 card--compact .card__title、card--compact .card__button —— 这样既保持 BEM 清晰性，又避免响应式样式散落各处。
