富文本必须用独立容器隔离样式，禁用继承并统一重置基础标签样式。正确做法是使用 all: unset 的 .rich-text 容器，仅通过标签选择器定义 p/h2/ul 等样式，修饰符用 data 属性透传，禁止在富文本内复用 BEM 组件。

富文本内容不能套用 BEM 命名，必须隔离样式作用域——它不是你定义的 block，而是运行时不可控的第三方 HTML。

为什么不能给 editor-content__p 这类类名？

富文本输出的 HTML 结构是动态生成的，

、

、 标签可能带内联 style、意外 class，甚至嵌套深度超出预期。直接在块里写 .editor-content__p 会：

• 违反 BEM “静态可预测结构”前提——__p 不是你声明的元素，无法保证它一定存在或只出现在该位置
• 导致样式泄漏：富文本里的
  可能继承父容器的 padding-left，而你本意只是重置 .card__content 的间距
• 被内联样式或 !important 覆盖，调试时发现规则明明写了却没生效

正确做法：用独立容器 + all: unset 重置

把富文本包裹在语义清晰、无样式继承的容器中，例如

，然后立即重置所有样式：

.rich-text {
  all: unset;
  /* 或 all: revert（Safari 15.4+ 稳定，IE 不支持） */
  /* 禁止设 font-size / line-height / color，避免向下继承 */
}
.rich-text p,
.rich-text h2,
.rich-text ul,
.rich-text li,
.rich-text img {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  /* 所有基础排版在此统一控制 */
}

关键点：

• .rich-text 容器自身不设任何影响继承的属性（如 font-size）
• 只用标签选择器（p、h2）而非 BEM 元素名，因为这些标签不是你定义的 __ 子项
• 不用 !important，靠 all: unset 切断源头更可靠

如何安全添加“窄列”“无图”等修饰逻辑？

修饰符不能作用于富文本内部标签，必须通过容器属性向下透传：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 要禁用图片：
  ，再写 [data-no-image] img { display: none !important; }
• 要窄列渲染：
  ，配合 [data-width="narrow"] { max-width: 600px; margin: 0 auto; }
• 更柔性方案：用 CSS 自定义属性，[data-no-image] { --rich-text-img-display: none; }，子规则里写 img { display: var(--rich-text-img-display, inline); }

别写 .rich-text--no-image ——这不是 rich-text 的一种变体，而是外部渲染策略，语义错位。

富文本里的链接、引用块能复用 BEM 组件吗？

不能。它们是内容片段，不是你的 block 实例：

• 不要给 加 .link 类，也不要在富文本里塞

  如果业务上需要统一链接样式，只在 .rich-text a 上定义基础行为（如颜色、下划线），不引入其他组件逻辑

  若某处引用块需特殊交互（如折叠），应由 JS 动态插入一个真正的 BEM 块（如

  ），而不是试图“劫持”原生

  最易被忽略的是：富文本永远是“不可信内容”，它的边界就是 .rich-text 容器。越界操作（比如在它里面调用 .button 或嵌套 __ 元素）只会让样式失控越来越难收场。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！