命名模糊将直接导致以下两种常见问题：

• 本地开发环境样式正常，但上线后样式被全局规则（如 .article h2）意外覆盖。
• 在使用 postcss-bem 等构建工具时，控制台出现 Unknown block "article" 的警告信息。

正确的实施策略应遵循以下几点：

• Block 命名应规避泛义词：使用 .post 比 .article 更安全，使用 .doc-content 比 .content 意图更明确。
• 若项目因历史遗留问题已使用 .article，可在构建配置中将其显式声明为合法 Block。例如，在 postcss-bem 配置中添加 blocks: ['article', 'blog-post']。
• 在 HTML 结构中，必须通过 class 属性显式声明 Block 容器，例如

  ...

  ，不能依赖浏览器对语义标签的自动关联。

元素（Element）命名规范：.blog-post__title 与 .blog-post__paragraph 的层级与语义区分

在文章排版中，标题、段落和引用块承担着不同的语义角色。标题是结构锚点，段落是内容主体，引用块则具有特殊的强调语义。BEM 规范禁止通过 DOM 嵌套层级来推断元素关系，因此必须为它们定义清晰、独立的 Element 名称。

这里有一份“前端免费学习笔记（深入）”立即学习；

具体操作时，可参考以下准则：

• .blog-post__title：此 Element 通常仅用于文章主标题（对应

  或顶级

  ），不应将其用于文章内部的小节标题。小节标题建议使用独立的 Block，如 .section-header。

• .blog-post__paragraph：应仅包裹纯文本段落。若段落内嵌套了列表、代码块等复杂结构，则不再适用。对于包含丰富行内格式（如加粗、行内代码）的段落，推荐使用修饰符，例如 .blog-post__paragraph--rich，而非创建新的 Element。
• .blog-post__quote：引用块应作为独立的 Element 存在。切勿写成 .blog-post__paragraph__quote 此类双下划线嵌套形式——BEM 明确禁止这种写法。引用块本身具备完整的语义和样式，完全可被单独复用。
• 所有 Element 都必须置于其所属的 Block 容器内。正确写法为：

  ...

  。否则，严格的工具可能会报 Element outside block 错误。

修饰符（Modifier）命名策略：避免使用 --large 与 --small，确保状态可预测

使用 .blog-post__title--large 来定义大标题，虽然直观，但“大”是一个相对且易变的视觉概念。当整体设计字体或屏幕尺寸发生变化时，此修饰符可能失效。更棘手的是，若需将所有 --large 改为 --xl，则需全局搜索替换，极易遗漏如 .blog-post__quote--large 等边缘情况。

因此，为修饰符命名时应遵循以下策略：

• Modifier 的值应具备语义化且可枚举。例如，使用 --h1、--h2 表示标题层级，使用 --lead 表示导语段落，使用 --pull 表示强调引用。
• 尽量避免使用纯粹的视觉描述词，如 --blue、--bold、--center。这些词绑定了具体样式表现，违背了 BEM “结构优先”的设计原则。
• 对于元素状态类（如 is-collapsed），它们可与 BEM 类共存，但命名应保持独立，不混入 Block 前缀。正确做法是：.blog-post__title.is-collapsed，而非 .blog-post__title--collapsed。
• 在 SCSS 等预处理器中编写样式时，可将具体视觉值抽离至 CSS 变量层。例如：&--h1 { font-size: var(--font-size-xxl); }，以此保持 Modifier 层的语义清晰与灵活性。

构建错误排查：Cannot resolve 'blog-post__quote' 的快速定位与解决

遇到此错误提示时，首先应检查构建工具配置而非 CSS 语法。这通常是 Webpack 配合 postcss-bem，或某些 CSS-in-JS 的 loader 在解析时受阻——工具默认只识别预配置在白名单中的 Element 名称，而你新添加的 quote 可能未被包含。

此类问题通常表现为：

• 开发服务器运行正常，但执行 npm run build 打包后，部分 class 的样式神秘消失。
• VS Code 语法插件将 blog-post__quote 标红，并提示 “Unknown element”。
• PostCSS 直接报错：Invalid BEM node: quote。

可按以下步骤快速排查与解决：

• 首先，检查构建配置文件，确认 Element 白名单是否包含 quote。以 postcss-bem 为例，需在配置中显式声明：elements: ['title', 'paragraph', 'quote', 'meta']。
• 确认 CSS 文件名符合 loader 的触发条件。若使用 CSS Modules，文件名需为类似 BlogPost.module.css 的格式，否则对应的 loader 可能不会启用 BEM 解析。
• 禁用缩写。类似 blk-post__qt 的简写，构建工具大概率无法识别。务必坚持使用完整的语义化词汇，如 quote。
• 部分插件支持通过注释临时调试。可尝试在文件顶部添加 /* bem: enable */ 注释，强制对该文件启用 BEM 解析。

总结而言，在文章排版中应用 BEM 规范，最易犯的错误是将「语义结构」与「视觉表现」混淆。例如，使用 --serif 命名字体，当需要为移动端切换为无衬线字体时，则需修改所有相关 class。又如，错误地将引用块定义为 .blog-post__paragraph--quote，而它本质上并非段落的变体，而是一个独立的语义单元。因此，坚守三大核心原则至关重要：Block 的功能边界需清晰、Element 应具备可复用性、Modifier 的值需可预测。这远比纠结命名细节更为根本。