富文本内容的class名天然不受BEM约束，因其由编辑器或后端动态生成，无法强制用户遵循BEM规范；必须通过唯一wrapper block（如.article-content）配合属性选择器、子选择器及data属性隔离样式作用域，而非依赖class命名。
富文本内容的class名天然不受BEM约束
富文本（如 dangerouslySetInnerHTML、v-html 或 CMS 返回的 HTML）里的 class 名是运行时动态插入的，完全由编辑器或后端控制。你无法要求用户在 Markdown 编辑器里写 article-content__paragraph，更没法阻止他们贴进一个 btn 或 header——这些 class 会直接撞上你项目里已有的 BEM 规则，尤其当它们没加 block 前缀时。
常见错误现象：article-content 容器内一段文字突然变蓝、缩进异常、字体变小，查了半天发现是全局 .btn { color: blue; } 或 h2 { margin-top: 0; } 泄露进来了。
- 富文本的 HTML 结构不可控，
class和id全是外部输入，不能假设其符合任何命名规范 - BEM 的隔离能力只作用于你手写的、受控的组件类名，对富文本 DOM 是“零防护”
- 用
:deep()或:global()去覆盖富文本内部样式，本质是拿高权重选择器硬压，后期维护成本陡增
用容器 block + 属性选择器锁死作用域
最可靠的做法不是去改富文本里的 class，而是给它套一层带唯一语义的 BEM block，并用属性选择器或子选择器限定所有样式生效范围。比如把富文本包裹在 <div class="article-content"> 里，然后所有样式都以这个 block 为根：
.article-content {
line-height: 1.6;
color: #333;
}
<p>.article-content h2 {
font-size: 1.5rem;
margin: 1.5rem 0 0.75rem;
}</p><p>.article-content [class^="wp-"],
.article-content [class<em>=" align-"],
.article-content [class</em>=" has-"] {
/<em> 拦截 WordPress 类名等常见 CMS 前缀 </em>/
all: unset;
display: inline;
}
- 避免写
.article-content p这种后代选择器——它依赖 HTML 标签，一旦富文本换用div包段落就失效；优先用.article-content > *或具体 class 拦截 - 用
[class^="..."]或[class*="..."]属性选择器软拦截 CMS 常见类名前缀（如wp-、has-、align-），比逐个写.wp-block-*更可持续 - 慎用
all: unset：它会清掉所有继承和默认样式，需手动补font-family、line-height等基础属性
第三方富文本编辑器（如 Tiptap、Quill）的 class 如何处理
这类库生成的 class（如 tiptap-editor、ql-editor）不是业务组件，不建议强行套 BEM 命名。它们的 class 是运行时注入、结构不稳定，且常含内联样式逻辑。
立即学习“前端免费学习笔记（深入）”；
- 不要尝试给
ql-editor加修饰符变成article-content__ql-editor——它本身不是你定义的 block，且库升级后可能改名或删掉 - 正确做法：用 wrapper block 包住整个编辑器实例，例如
<div class="form-field--rich-text"><TiptapEditor /></div>，再通过.form-field--rich-text :deep(.tiptap)（Vue）或.form-field--rich-text .tiptap（CSS Modules 外部）局部控制 - 若使用 CSS-in-JS 或 Shadow DOM，富文本容器设为
scoped或encapsulation: Shadow，可天然阻断外部样式泄漏 - 警惕编辑器自带的 reset.css（如 Quill 的
quill.snow.css），它可能重置blockquote、ol等标签样式，需在 wrapper 内显式还原
富文本中嵌入的自定义组件如何保持BEM一致性
当富文本支持插入「组件块」（如广告位、引用卡片、视频播放器），这些组件必须是你自己写的、受控的 BEM block，不能靠 class 名拼接或 JS 动态加类。
- 禁止在富文本 HTML 里硬写
<div class="ad-banner__content">——编辑器保存时可能过滤、转义或丢失 class - 推荐方案：用自定义 HTML 注释或 data 属性标记组件位置，例如
<!-- ad-banner:{"id":"123"} -->，JS 解析后动态挂载真实组件，确保类名由组件自身输出 - 若必须用 class 标识，统一用
data-component属性：<div data-component="ad-banner" data-id="123">，再用[data-component="ad-banner"]选择器绑定样式，完全绕过 class 名冲突风险 - 所有富文本内嵌组件的 CSS 必须走同一构建流程（如 CSS Modules 或 postcss-prefix-selector），确保类名自动加命名空间，不依赖人工写前缀
真正难的不是写对一个 article-content__heading，而是让富文本这个“外部世界”和你的 BEM 工程体系之间有一道清晰、稳定、不靠运气的边界——这道边界不在 class 名里，而在容器、选择器策略和加载时机上。
