富文本不能套用bem类名，因其结构动态不可控，无法保证html与类名严格匹配；bem仅提供块名锚点（如article-content），内部须用属性选择器、子选择器及all: unset重置来隔离样式，禁用后代选择器。
富文本内容为什么不能套用 BEM 类名
因为富文本（如 CMS 后台编辑器输出的 HTML）是动态生成、结构不可控的，你无法强制它在 <p></p> 里加 article-content__paragraph，也不能要求作者手动写 blockquote--cite。BEM 的前提——“HTML 结构与类名严格匹配”——在这里根本不存在。
直接给富文本容器加 BEM 块名还不够
只写 <div class="article-content">...</div> 并不能防止污染。浏览器看到的是 .article-content h2 这种后代选择器，一旦全局有 h2 { margin-top: 0 }，照样生效；更糟的是，如果其他模块也用了 .article-content，样式会互相覆盖。
- 必须切断富文本内部元素对全局样式的继承和响应
- 禁止在富文本 CSS 中写
.article-content p这类后代选择器——它违背 BEM 封装原则，且 DOM 变动即失效 - 真正有效的做法是：用属性选择器或子选择器锁定富文本边界，例如
.article-content > *:not([class])或.article-content [class^="hljs-"]
安全渲染富文本的三步实操
核心不是“怎么命名”，而是“怎么隔离”。BEM 在这里只提供块级锚点，其余靠 CSS 策略兜底：
- 外层容器必须带唯一 BEM 块名（如
article-content），且该块名不得被其他非富文本区域复用 - 所有富文本内建样式必须用
[class^="article-content__"]或.article-content > *+all: unset重置起点，再逐个声明h1、ul、table的样式 - 第三方语法高亮（如 Prism）等插件注入的类名，统一用属性前缀约束：
.article-content [class^="hljs-"]，避免漏匹配或误匹配
最容易被忽略的兼容性坑
服务端渲染（SSR）时，若富文本 HTML 是静态注入的，而客户端 JS 又动态追加了 article-content__caption--left 这类 BEM 类名，hydration mismatch 就会发生——React/Vue 会警告“服务端与客户端 DOM 不一致”。这不是 BEM 的错，但它是你决定是否在富文本里混用修饰符时必须卡住的红线。
结论很实在：富文本区域不适用 BEM 的元素/修饰符体系，它只借 BEM 的“块名”当沙箱入口，剩下的全靠显式重置、属性选择器和构建时可预测的类名策略守住底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
