布局组件必须用 dash 分隔且带项目前缀，如 myapp-dashboard；功能组件名须表意明确、不含位置或视觉词，如 search-form；css 加载顺序需严格隔离，布局样式优先于功能样式；嵌套时类名保持平级，不拼接父级路径。
布局组件必须用 dash 分隔且带项目前缀
布局类名本质是容器契约，不是功能单元。比如 .dashboard 或 .product-grid 这类名字，必须带项目上下文（如 myapp-dashboard），否则会和业务组件冲突。BEM 不反对布局块存在，但禁止用泛语义词如 .container、.wrapper —— 它们无法回答“这是什么”，只说明“它包着别的东西”。
-
.main-layout❌：没业务含义，复用时不知道它对应哪类页面 -
.checkout-page✅：明确是结账流程的顶层容器，可独立维护 -
.product-list__item是功能组件，.product-list才是它的父级布局块 —— 二者层级清晰，不混用
功能组件名不能含位置或视觉词
功能组件的核心是“它做什么”，不是“它在哪”或“它长啥样”。.header-search 看似合理，但 header- 是位置限定，导致无法在弹窗里复用同一个搜索逻辑；.btn-red 直接绑定颜色值，换主题就得全局替换。
- 正确写法：
.search-form（功能闭环）、.user-card（语义完整） - 错误写法：
.top-nav（位置词）、.card-shadow（表现类）、.modal-button（绑定使用场景） - 修饰符也得守这条线：
.search-form--compact✅（交互密度），.search-form--top-aligned❌（位置描述）
布局与功能组件的 CSS 加载顺序必须严格隔离
布局组件样式必须在所有功能组件之前加载，否则 .dashboard__sidebar 的 grid-area 可能被 .nav__item 的 margin 覆盖。这不是优先级问题，而是层叠意图错位。
- 基础层文件必须带下划线前缀：
_reset.css、_layout.css、_theme-vars.css -
_layout.css里只放.dashboard、.dashboard__header这类纯结构类，不包含任何字体、颜色、间距规则 - 功能组件 CSS（如
search-form.css）必须引用_theme-vars.css，但绝不能 import 或 @use 布局文件 —— 它们之间只能靠 HTML 结构耦合，不能靠样式依赖
嵌套时功能组件永远平级声明，不拼接布局路径
当 .user-card 出现在 .dashboard__main-content 里，CSS 类名仍是 .user-card 和 .user-card__avatar，而不是 .dashboard__main-content__user-card。后者既违反 BEM 的块独立性，又让组件失去跨页面复用能力。
- DOM 结构决定作用域，不是类名拼接：
<div class="dashboard__main-content"><div class="user-card">...</div></div> - 如果需要定制化样式（比如主内容区里的卡片要窄一点），加修饰符：
.user-card--in-main-content，而非修改块名 - 工具链如
postcss-bem或clsx可帮你拦截非法嵌套命名，但前提是开发者不手写三层结构
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
