必须。bem要求card块的所有直接子元素均以card__为前缀，如card__title、card__content，不加前缀会破坏封装性、引发样式泄漏；修饰符须严格采用block--modifier或block__element--modifier格式，不可缩写。
card 元素内部的子元素命名是否必须带 card__ 前缀？
必须。BEM 要求所有属于 card 块的直接子元素，都用 card__ 作为修饰符前缀，哪怕它看起来“通用”——比如 card__title、card__content、card__footer。不加前缀（如直接叫 title 或 content）会破坏块的封装性，导致样式泄漏或复用困难。
常见错误是把语义化标签名当类名用：<div class="card">
<h3 class="title">... —— 这会让 <code>.title 在其他上下文里意外生效，也违背 BEM “类名即作用域” 的设计初衷。
实操建议：
- 所有卡片内结构层元素（标题、图片、描述、操作区）统一用
card__xxx命名 - 避免嵌套块，例如不要在 card 内部再起一个
button块；按钮应写作card__action或card__button - 若需复用某子元素（如
card__tag），确保它只依赖card上下文，不引入外部样式逻辑
如何用 BEM 表达卡片的不同尺寸和主题？
用修饰符（modifier）——但必须严格遵循 block--modifier 或 block__element--modifier 格式，不能混用或缩写。比如 card--large、card--compact、card--inverted 是合法的；而 card-large 或 card_inverted 不符合规范，会导致预处理器解析失败或团队协作混乱。
关键点在于：修饰符不独立存在，必须依附于块或元素。你不能只写 class="card--large" 而不同时带 card。
示例正确用法：
<article class="card card--featured card--dark"><h3 class="card__title card__title--highlighted">...</h3></article>
注意：card__title--highlighted 是对元素的修饰，不是对块的；它只影响标题样式，不影响卡片整体结构。
card 组件能否包含可选的、非结构化的插槽内容？
可以，但插槽本身仍需明确归属。BEM 不禁止动态内容，但要求 DOM 结构稳定、类名可预测。比如用户传入的富文本区域，不应直接塞进 card__content 却不约束其内部样式；更稳妥的做法是定义 card__body 作为容器，并用 card__body-inner 隔离外部 HTML。
容易踩的坑：
- 允许用户插入任意 HTML，却没重置
card__body > *的 margin/padding —— 导致段落间距爆炸 - 用
card__content承载图文混排，但未约定图片默认居中或最大宽度限制，响应式失效 - 把第三方组件（如图标、徽章）直接写成
<icon></icon>而不包裹为card__icon，破坏样式隔离
推荐做法：对外暴露的插槽统一挂载到带明确 BEM 类名的容器下，例如 <div class="card__append">{children}</div>，并文档注明该区域不继承卡片内 typographic 样式。
SCSS 中怎么高效维护 card 的 BEM 层级？
用嵌套 + &，但只嵌两层：块自身和它的直接子元素。不要三层嵌套（如 .card { .card__title { .card__title-link { ... } } }），这既难读又违反 BEM “扁平化选择器” 原则。
正确 SCSS 片段：
.card {
// 块样式
&__title {
font-weight: 600;
&--highlighted { color: var(--accent); }
}
&__body { line-height: 1.5; }
&--compact { padding: var(--space-xs); }
}
性能提示：BEM 类名最终编译为单层 CSS 选择器（如 .card__title），比后代选择器（.card .title）更快，也更容易被 CSS-in-JS 工具提取和作用域化。但若滥用 &__xxx 生成大量重复前缀，在超大项目中可能略微增加 CSS 体积 —— 此时可考虑用 PostCSS 插件做类名压缩，而非手动删前缀。
真正容易被忽略的是：修饰符的响应式断点必须与块绑定，而不是单独写 @media (min-width: 768px) { .card--large { ... } } —— 应该写在 .card--large 嵌套里，确保媒体查询逻辑随块共存亡。
