页面级block必须是语义清晰、可跨页复用的独立功能单元，如.hero-banner、.product-grid；禁止使用.page、.home等泛义容器名，因其无业务含义、不可复用、易导致样式耦合。
页面级Block必须有明确业务语义，不能是泛义容器
页面级Block不是整页的父壳，而是具备独立功能、可跨页面复用的内容单元。比如首页的轮播图叫 .hero-banner，商品列表叫 .product-grid，它们在用户页、活动页、弹窗里都能直接复用。而 .page、.home、.wrapper 这类名字没说明“这是什么”，只暗示位置或结构，属于布局占位符，不该作为 Block。
常见错误是把整个 <main></main> 包进 .page__content，结果导致样式耦合：改个 .page 的 margin，所有子元素布局偏移；换到新页面时，.page__header 根本没法复用。
-
.hero-banner✅ 可出现在首页、活动页、邮件模板，自带标题、按钮、图片逻辑 -
.user-dashboard✅ 有状态、变体（--loading）、交互（刷新按钮） -
.page❌ 删除它，页面结构还在，但没缺任何功能单元 -
.section-2❌ 名字依赖当前页面顺序，无法跨项目迁移
通用Block必须能脱离上下文独立存在并封装完整行为
通用Block是设计系统里的标准组件，如 .button、.input-field、.card。它们不依赖父容器就能渲染、交互、样式自洽，且在多个业务线中高频出现。判断标准很实在：删掉它，页面是否缺失一个可交付的功能？它是否有自己的 Storybook 示例、Figma 组件、测试用例？
注意，.button 是通用Block，哪怕只渲染一个 <button></button> 标签；但 .btn-wrapper 不是——它只为 flex 对齐或 margin 服务，没有独立语义和行为。
- 通用Block命名不含位置词：
.search-form✅，.header-search❌ - 通用Block内部不暴露布局意图：
.card__body✅（内容区），.card__flex-container❌（描述实现） - 通用Block可被组合，但不嵌套：
.user-card里放.avatar和.status-badge，三者平级，各自维护 CSS 文件
当一个组件既用于页面又用于通用场景，怎么定名？
关键看首次抽象动机和复用范围。如果某个模块最早为「用户管理页」定制，但后续在权限页、日志页、弹窗里都复用，且封装了统一 API、校验逻辑、加载状态，那它就是通用Block，应命名为 .user-card 而非 .user-page__card。
反过来说，如果只是首页特供的运营 Banner，带强业务规则（如仅限 A/B 测试用户可见）、无其他页面调用记录，那就保持为页面级Block：.homepage-hero，不强行升格。
- 命名优先用业务语言：
.notification-badge✅（谁发的、未读数、跳转逻辑），不是.circle-dot - 禁止用技术实现反推名：
.grid-item❌，.product-card✅ - Modifier 必须稳定：
.button--primary✅（角色），.button--blue❌（视觉值，易随设计稿变更）
HTML结构里如何避免块与元素的混淆？
页面级Block和通用Block在 DOM 中可以自由嵌套，但命名上绝不允许拼接前缀。比如 .header 里放 .logo 和 .search-form，这三个都是独立 Block，class 名保持原样，不写成 .header__logo 或 .header__search-form。
一旦你发现某个“子组件”永远只出现在某父块里、抽离后无法独立使用、也没有自己独立的 JS 行为或样式边界，那它大概率不该是 Block，而是父块的 Element —— 比如 .card__footer，而不是 .card-footer。
- 合法嵌套：
<header class="header"><div class="logo"></div></header> - 非法嵌套：
<div class="header__logo"></div>（破坏.logo的复用性） - Element 必须绑定 Block：
.card__title不能脱离.card单独存在，否则语义断裂
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
