.header是危险命名，因它是html标签直译、无业务语义，导致复用时样式污染、作用域失控；应改为.page-header等带功能语义的独立block。
Header 必须拆成独立 Block，类名带业务语义（如 .page-header），不能叫 .header。 否则在弹窗、卡片、侧边栏里复用时，样式会互相污染，margin 和 padding 全乱套。
为什么 .header 是危险命名
它不是功能单元，而是 HTML 标签名的直译。一旦页面里出现 .modal-header 或 .card-header，.header 就失去唯一性，CSS 选择器权重和覆盖行为失控。更麻烦的是，别人改了全局 .header 的 padding，你的用户卡片顶部间距就莫名崩掉。
-
.header没有业务上下文，无法判断它属于哪个模块 - 工具链（如 CSS Modules、PostCSS BEM 插件）无法识别其作用域边界
- 未来抽离为独立组件时，样式依赖丢失，
.header__logo在别处渲染会漏掉关键约束
.page-header 里哪些该是 Element，哪些不该嵌套
Element 只能直接隶属于 Block，禁止三层命名。所有子元素必须显式归属，不靠 DOM 层级推导。
- 正确：
.page-header__logo、.page-header__nav、.page-header__action - 错误：
.page-header__nav__item（Element 嵌套 Element，违反 BEM）→ 应改为.page-header__nav-item - 错误：
.page-header__logo-text（看似合理，但若logo-text需单独交互或动画，应升格为独立 Block，如.logo-text） - 图标类名必须扁平：
.page-header__logo-icon，不是.page-header__logo__icon
修饰符（Modifier）该加在 Block 还是 Element 上
修饰符描述状态或变体，只开关样式，不改变结构。它必须与 Block 或 Element 并列使用，不能替代 Element。
- 正确：
.page-header--compact（整个头部变紧凑） - 正确：
.page-header__nav--mobile（仅导航部分响应式切换） - 错误：
.page-header__nav--in-modal（把位置信息当状态，违反“modifier 不表达层级关系”原则） - 错误：
.page-header__logo--dark（元素级修饰符易导致复用断裂；应统一用.page-header--dark控制整体色调）
最容易被忽略的是：Header 不是容器语义，而是功能语义。它承载标题、导航、操作按钮等头部信息——这些子项一旦具备独立交互逻辑（比如可折叠的导航、带下拉的 logo），就该立刻拆成独立 Block，而不是硬塞进 .page-header__xxx 里撑满三层下划线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
