CSS BEM命名下卡片组件的标题和按钮该如何写？

卡片标题该用__title，仅承载主标题时；含标题+副标等组合信息则用__header。按钮需依上下文加card__前缀，禁用三级嵌套如card__title__link，响应式应避免--mobile而用语义化修饰符如--compact。

卡片标题该用 __title 还是 __header？

看语义，不是看视觉样式。如果这个区域只承载主标题文字（比如新闻卡片的 headline），用 __title 更准确；如果它包含标题+副标+时间等组合信息，实际是卡片的“头部容器”，那就该用 __header —— BEM 的 __ 后缀描述的是功能角色，不是字体大小或 margin 值。

常见错误是看到 UI 上有个大号字就写 card__title，结果后面加了个 ，逻辑上就断层了：subtitle 不是 title 的子元素，而是同级内容。这时应该统一收进 card__header，再让 card__header-title 和 card__header-subtitle 各司其职。

按钮在卡片里要不要加 card__ 前缀？

要，但得看它是否具备卡片专属行为。纯通用按钮（比如全局复用的 btn btn--primary）可以不加；但如果这个按钮的样式、状态或交互逻辑和卡片强绑定（例如“收藏”按钮会改变卡片整体状态，或悬停时卡片边框同步高亮），就必须走 card__button 或更精确的 card__favorite-button。

实操建议：

1. 先定义一套基础按钮类（如 btn），再用 BEM 修饰它的上下文：card__button btn btn--secondary
2. 避免写 card__btn 这种模糊命名，btn 是实现细节，button 才是语义
3. 如果按钮有图标+文字组合，别拆成 card__button-icon + card__button-text，除非它们需要独立控制；多数情况用 card__button 包裹原生 button 内部结构即可

card__title 里还能不能再嵌 __？

不能。BEM 规则明确禁止三级下划线嵌套，比如 card__title__link 是错的。正确做法是提升层级：如果标题里有可点击的链接，应该写成 card__title-link —— 它和 card__title 是平级元素，都属于 card 的子元素。

为什么？因为 __ 表示“属于某个块的直接组成部分”，而 card__title 本身不是块，不能作为父级去定义子元素。否则会导致：

1. 样式作用域混乱（你改了 card__title 的 padding，结果 card__title__link 的垂直对齐全乱）
2. JS 选择器耦合过重（document.querySelector('.card__title__link') 一旦 title 类名变更就失效）
3. 组件复用困难（把 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 清晰性，又避免响应式样式散落各处。