富文本输出不可用BEM命名，因其结构动态不可控；应包裹于独立容器（如.rich-text），用all: unset重置样式，仅通过属性选择器或CSS变量控制修饰逻辑，禁止内联标签套BEM类名。
富文本输出内容不属BEM管辖范围，必须隔离样式作用域
直接给 .editor-content 套 BEM 命名并写一堆 .editor-content__p、.editor-content__h2 是错的。富文本 HTML 是运行时动态插入的，结构不可控、标签不可信、嵌套深度不可测，它和 BEM 的“静态可预测结构”前提根本冲突。
常见错误现象：.article__body 里塞了富文本，结果 ul 里的 li 突然缩进异常，或 table 撑破容器——不是 BEM 写错了，是富文本自带的内联样式、class、甚至 style 属性在捣乱。
- 富文本输出应视为“第三方不可信内容”，默认不继承任何组件样式
- 用
all: unset或all: revert重置所有继承与默认样式（注意兼容性：IE 不支持，revert在 Safari 15.4+ 才稳定） - 必须包裹在独立容器中，如
<div class="rich-text">，且该容器禁止设font-size、line-height等影响继承的属性 - 若需基础排版，只定义最简规则：
.rich-text p、.rich-text h2等，**不用 BEM 元素命名法**，因为这些标签不是你定义的 block 子元素
如何安全地为富文本加修饰符？比如“窄列渲染”或“无图模式”
修饰符不能作用于富文本内部标签，而应作用于包裹容器，并通过属性选择器或自定义属性向下透传控制逻辑。
例如要实现“无图模式”，不要写 .rich-text--no-image img { display: none }（富文本可能带 !important 或内联 style），而是：
立即学习“前端免费学习笔记（深入）”；
- 给容器加
data-no-image属性：<div class="rich-text" data-no-image> - 用属性选择器控制：
[data-no-image] img { display: none !important; } - 配合 CSS 自定义属性做更柔性控制：
[data-no-image] { --rich-text-img-display: none; }，再在子规则里用img { display: var(--rich-text-img-display, inline); } - 避免用
.rich-text--no-image这类 BEM 修饰符——它暗示这是 rich-text 的一种变体，但实际是外部渲染策略，语义错位
富文本中链接、引用块等“伪组件”怎么复用BEM逻辑？
不能把 <a href="..."> 当作 .link 复用，也不能强行给 <blockquote> 加 .card__quote。它们不是你的 block 实例，而是内容片段。
真正可行的做法是“样式映射”，而非“类名复用”：
- 提取富文本中常见的语义结构（如
blockquote、pre code、figure img），为其单独定义中立类名：.rich-text-blockquote、.rich-text-code - 这些类名不遵循 BEM 命名（不叫
rich-text__blockquote），因为它们不构成可复用 block，只是兜底样式锚点 - 在编辑器后端或前端清洗阶段，将原始标签自动包裹或替换为带上述中立类的结构，例如把
<blockquote>...转成<blockquote class="rich-text-blockquote">...</blockquote> - 这样既保有 BEM 组件的纯净性，又让富文本获得可控样式基线
为什么不能用 !important 强行覆盖富文本内联样式？
能压住一时，但会破坏整个样式的可维护链路。更麻烦的是，某些富文本编辑器（如 TinyMCE、CKEditor）会在粘贴时自动注入 !important，形成“!important 嵌套”，最终谁也赢不了。
真正兜底的关键不在权重，而在隔离层级：
- 用
iframe嵌入富文本预览区（最彻底，但交互成本高） - 用
shadow DOM封装（现代方案，但 SSR 和 SEO 友好性差） - 用
all: unset+ 显式重置关键属性（推荐：重置margin、padding、font、color、background，再逐标签声明） - 禁用富文本编辑器的“保留格式”粘贴选项，从源头减少污染
最易被忽略的是：富文本兜底不是写更多 CSS，而是承认它和 BEM 属于两个样式治理域——前者靠清洗与重置，后者靠封装与复用。混在一起，两边都不可靠。
