页面级模块必须是独立block，如.hero-banner、.product-grid，而非泛义的.page或.home；每个block应语义清晰、可复用、平级并列，禁止嵌套或用位置命名。
页面级模块必须是独立 Block，不能叫 .page 或 .home
页面级模块不是“所有东西的父容器”，而是有明确边界和复用价值的功能单元。直接写 .page 或 .home 是错的——它没说明“这是什么页面”，也没法隔离样式。比如首页轮播图、商品列表、底部推荐，每个都该是独立 Block：.hero-banner、.product-grid、.footer-recommend。
常见错误是把整页 HTML 包进一个 .page，然后在里面写 .page__header、.page__main。问题在于：.page__main 无法被其他页面复用，且一旦改 .page 的 margin，所有子元素布局可能意外偏移。
- Block 名必须描述功能或内容，如
.article-list、.user-dashboard，而非位置或层级 - 禁止用泛义词：
.section、.wrapper、.container都不合格 - 命名用小写 + 短横线，避免下划线或驼峰，确保与工具链（如 stylelint）兼容
页面级 Block 内部不嵌套 Block，但可组合多个 Block
一个页面不是单个 Block 的容器，而是多个 Block 的组合。比如用户个人页，应由 .user-profile、.user-activity-feed、.user-settings-panel 并列组成，而不是把它们全塞进 .user-page__content 里。
这样做的好处是：每个 Block 可单独测试、复用、抽离成组件；修改 .user-activity-feed 不会影响 .user-profile 的样式逻辑。
- HTML 中各 Block 平级并列：
<div class="user-profile"></div> <div class="user-activity-feed"></div> - 不要用
.user-page__profile这类写法——它把 profile 变成了 page 的子元素，破坏了 Block 的独立性 - 如果两个 Block 有强视觉关联（如卡片+操作栏），用属性标记协调，例如
data-layout="card-with-actions"，而不是靠 CSS 嵌套控制
页面级 Block 的 Modifier 应反映业务状态，而非视觉效果
.user-profile--loading 合理，.user-profile--dark 就危险——后者容易变成主题开关，导致全局搜索替换。页面级 Block 的 Modifier 必须绑定到具体业务场景。
比如后台管理页的权限状态：.admin-dashboard--read-only、.admin-dashboard--pending-approval；电商页的流程状态：.checkout-flow--step-2、.checkout-flow--payment-failed。
- Modifier 值必须可枚举、可预测，禁用
--v2、--new、--beta这类临时标签 - 避免跨 Block 共享 Modifier 名，
.user-profile--expanded和.admin-dashboard--expanded是两套逻辑，不能合并成--expanded - React 中建议用
clsx组合，而非字符串拼接：className={clsx('user-profile', { 'user-profile--loading': isLoading })}
SCSS 里写页面级 Block，只允许单层嵌套
SCSS 中用 &__ 和 &-- 是安全的，但绝不能出现 &__header &__logo（带空格）——那会生成后代选择器，破坏 BEM 隔离性。
正确写法是每个 Block 自成文件或作用域，内部只定义自己的 Element 和 Modifier：
.user-profile {
&__avatar { /* … */ }
&__name { /* … */ }
&--loading {
opacity: 0.6;
}
}
- 禁止在页面级 Block 中写
.user-profile .user-stats——.user-stats应是独立 Block - 如果某个页面需要统一间距或字体，用 CSS 自定义属性（
--page-spacing）控制，而不是靠 Block 嵌套传递样式 - 多人协作时，Block 文件名必须与类名一致：
user-profile.scss→.user-profile，否则 lint 工具会报错
真正难的不是记住语法，而是每次写类名前多问一句：“这个东西，脱离当前页面还能不能用？” 如果答案是否定的，它大概率不该是一个 Block。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
