BEM要求Block必须具备明确功能边界和复用价值，不能直接用泛义词如.article；应命名为.blog-post等语义化名称，并确保Element和Modifier严格遵循命名规范以避免冲突与耦合。
文章 Block 必须独立，不能叫 .article 就完事
直接写 .article 作为 Block 名看似合理，但容易和 CMS 输出的原生 <article></article> 标签、或第三方组件的 .article 冲突。BEM 要求 Block 具备明确功能边界和复用价值，比如你实际要封装的是「技术博客正文」这个场景，就该定为 .blog-post 或 .tech-article。
常见错误现象：
- 样式在预览页正常，上线后被全局
.article h2覆盖 - 用
postcss-bem构建时提示Unknown block "article"
实操建议：
- Block 名避免泛义词：
.post比.article更安全，.doc-content比.content更聚焦 - 如果项目已用
.article，可在构建配置中显式注册它为合法 Block（如 postcss-bem 的blocks: ['article', 'blog-post']） - HTML 中必须显式声明 Block 容器：
<div class="blog-post">...</div>，不能只靠语义标签隐含
.blog-post__title 和 .blog-post__paragraph 怎么区分层级与语义
标题和段落不是平级 Element —— 标题是结构锚点，段落是内容容器，引用则是特殊语义块。BEM 不允许靠 DOM 深度推断关系，所以必须各自定义清晰的 Element 名。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
.blog-post__title：仅用于主标题（<h1></h1>或顶级<h2></h2>），不用于小节标题；小节应另起 Block，如.section-header -
.blog-post__paragraph：包裹纯文本段落，不含列表、代码块等嵌套结构；遇到复杂内联格式（如行内代码、强调），用.blog-post__paragraph--rich修饰符，而非新增 Element -
.blog-post__quote：独立 Element，不写成.blog-post__paragraph__quote—— BEM 禁止双下划线嵌套，且引用本身具备语义完整性，可单独复用 - 所有 Element 必须出现在 Block 容器内：
<div class="blog-post"><p class="blog-post__paragraph">...</p></div>，否则工具可能报Element outside block
修饰符别写 --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 中用
&--h1 { font-size: var(--font-size-xxl); }，把视觉值抽到 CSS 变量层，保持 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'] - 确认文件名符合 loader 触发条件：如果是 CSS Modules，必须是
BlogPost.module.css，否则 loader 不启用 BEM 解析 - 禁用缩写：
blk-post__qt工具大概率不识别，坚持用完整语义词quote - 临时调试可加
/* bem: enable */注释头，强制当前文件启用解析（部分插件支持）
BEM 在文章排版中最容易被忽略的点，是把「语义结构」和「视觉表现」混在一起命名。比如用 --serif 表示字体，结果某天要给移动端切无衬线体，就得改所有 class；又或者把引用写成 .blog-post__paragraph--quote，其实它根本不是段落的变体，而是独立语义单元。守住 Block 的功能边界、Element 的可复用性、Modifier 的可预测性，比选对第一个连字符更重要。
