富文本编辑器bem命名须按功能域拆分为独立block：toolbar和editor-content各为顶层block，paragraph等语义节点升格为block，inline样式用属性选择器接管，尺寸联动由外层rich-editor容器控制。
富文本编辑器的BEM命名不能从「编辑器外壳」开始套，必须按功能域切分独立 block，否则 toolbar、content、status-bar 三者样式会互相污染，改一个按钮 hover 就得通查所有 editor__ 类。
toolbar 和 content 必须是两个独立 block
常见错误是把整个编辑器当一个 editor block，然后写 editor__toolbar、editor__content、editor__status-bar。这看似合理，实则让 toolbar 的按钮样式和 content 区域的段落样式共享同一作用域——比如 editor__button--active 和 editor__paragraph--selected 在 CSS 里权重相同，后期加 !important 或提高选择器层级就成了常态。
- 正确做法：拆成
toolbar和editor-content两个顶层 block，各自管理内部元素 -
toolbar__button只负责按钮外观与交互反馈，不感知内容区是否存在 -
editor-content__paragraph只管段落渲染逻辑（如首行缩进、行高、选中态），不依赖 toolbar 是否展开 - 二者 DOM 关系只需满足“视觉相邻”或“语义包裹”，无需强绑定；例如
<div class="toolbar"></div> <div class="editor-content"></div>即可
toolbar__button 的 Modifier 必须语义化，不能写 .toolbar__button--bold
直接用加粗、斜体、列表这些视觉动作命名修饰符，会导致换主题或支持新格式时类名爆炸：toolbar__button--strikethrough、toolbar__button--superscript……而且无法复用到快捷键提示、菜单项等其他地方。
- Modifier 应表达「命令意图」而非「渲染结果」：
toolbar__button--command-bold、toolbar__button--command-link - 实际状态（是否激活）由 JS 控制另一个类：
toolbar__button--active，它只控制背景/边框/图标变色，不决定按钮行为 - 快捷键提示另起 block：
key-hint，不是toolbar__button__key-hint——后者违反 BEM 元素不可嵌套原则 - 如果某按钮需同时支持 command + active + disabled 三种状态，用三个独立类组合：
toolbar__button toolbar__button--command-bold toolbar__button--active toolbar__button--disabled
editor-content 中的 paragraph、list-item 等不是 Element，而是独立 Block
很多人习惯写 editor-content__paragraph、editor-content__list-item，以为这是“内容区的子元素”。但这些节点在 HTML 中是平级的（<p></p>、<ul></ul>、<blockquote></blockquote>），且可能被拖拽、复制、跨 block 粘贴。把它们降级为 Element，等于放弃样式复用和独立测试能力。
- 每个语义化节点应升格为 block：
paragraph、list-item、blockquote、heading - 它们共用一套基础排版规则（如
line-height、margin-bottom），通过@layer base统一定义，不依赖父级 -
editor-content唯一职责是提供容器上下文（如min-height、outline、tabindex），不写任何段落或列表样式 - 若需特殊样式（如“文档末尾的 paragraph 不要 margin-bottom”），用修饰符：
paragraph--last-in-editor，而不是在editor-content里写.editor-content__paragraph:last-child
如何处理 inline 样式节点（如 span[data-inline="bold"]）
原生富文本中大量使用 span 包裹文字并打标记，这类节点没有 DOM 结构对应，纯靠属性驱动，BEM 很难直接覆盖。硬套 editor-content__inline-bold 会导致类名泛滥且不可维护。
- 放弃为每种 inline 样式建 Element，改用属性选择器统一接管：
[data-inline="bold"]、[data-inline="link"] - 这些样式收口在
editor-content的 CSS 文件里，但不参与 BEM 命名体系——它们是“运行时注入”的样式层，和静态结构分离 - 若需支持主题切换（如深色模式下 link 文字变蓝），用 CSS 自定义属性：
--editor-inline-link-color，而非editor-content__inline-link--dark - JS 插入 inline 节点时，确保只加
data-inline属性，不拼接任何 BEM 类名，避免样式耦合
最易被忽略的是：toolbar 和 editor-content 的尺寸联动（比如 toolbar 宽度随编辑器宽度变化）不该靠 toolbar 类自己响应式，而应由外层容器（如 rich-editor）用 grid/flex 控制二者关系；rich-editor 是唯一允许出现布局逻辑的 block，其余全部只管语义与表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
