应将排版样式绑定到具体业务 block（如 blog-post、legal-doc），而非抽象 typography；基础排版规则须抽离至 _base-typography.css 统一管理，确保字体族、字重、颜色等跨 block 属性集中可控。
直接用 .article 或 .content 当排版 Block 名是错的——它既没业务语义，又极易和 CMS、编辑器插件输出的类名冲突。
为什么不能把 typography 当成一个通用 Block
BEM 的 Block 必须对应可复用、有明确边界的组件，不是“所有文字都归它管”的容器。把 typography 单独建块，容易导致：
- 样式泄漏：在
typography__heading里写margin-bottom: 1.5rem，结果被用在弹窗标题、侧边栏标签、表格内文字上，间距全乱 - 无法响应上下文：技术博客正文的
h2和产品落地页的h2需求完全不同，硬塞进同一个 Block 就得靠 Modifier 堆叠，比如typography--blog--hero--compact，失去可读性 - 破坏 BEM 隔离原则：一旦在
typography.css里写p + h3 { margin-top: 0 }这类关系选择器，就等于把布局逻辑塞进排版层，后续换结构必崩
blog-post__title 比 typography__title 更合理
排版样式必须绑定到具体业务场景的 Block 上，而不是抽象出“文字”本身。例如：
- 技术博客正文 →
blog-postBlock，其元素为blog-post__title、blog-post__paragraph、blog-post__quote - 用户协议页面 →
legal-docBlock，对应legal-doc__section-title、legal-doc__body-text - 卡片摘要区 →
product-summaryBlock，用product-summary__headline、product-summary__description
这样每个 Block 的字体大小、行高、断行、字重都只服务于当前语义，不污染其他地方。Modifier 也更可控：blog-post__title--subtle 表示副标题，blog-post__paragraph--lead 表示导语段，不会和法律文档的 lead 段产生歧义。
全局排版基础规则必须抽离到 _base-typography.css
真正该统一管理的，是 HTML 级别的基础排版行为，比如：
-
html { font-size: 100% }（保障缩放一致性） body { line-height: 1.6; font-family: var(--font-sans) }h1, h2, h3, h4, h5, h6 { font-weight: 600; margin: 0 }p, ul, ol { margin-block-start: 1rem; margin-block-end: 1rem }
这些规则必须放在带下划线前缀的 _base-typography.css 中，并确保它在所有 BEM Block CSS 文件之前加载。否则 blog-post__title { font-size: var(--text-xl) } 里的 CSS 变量会取不到值。
避免在 Block 文件里重复定义字体相关属性
常见错误是在 blog-post.css 里写：
.blog-post__title {
font-family: 'Inter', -apple-system, sans-serif;
font-weight: 700;
color: var(--color-heading);
}
这违反了分层原则。正确做法是：
-
_base-typography.css定义html { font-family: var(--font-sans); }和--font-sans: 'Inter', -apple-system, sans-serif -
_theme-vars.css定义--color-heading: #1a1a1a -
blog-post.css只负责结构与上下文适配：.blog-post__title { font-size: clamp(1.5rem, 4vw, 2.25rem); }
字体族、字重、颜色这些跨 Block 复用的视觉属性，一旦散落在各 Block 文件中，换品牌色或换字体时就得全局搜索替换，根本不可维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
