该。头部布局应拆为独立Block，如.page-header，当具备独立语义、可复用或需单独控制样式/状态时；子元素须显式归属命名，导航等交互单元应保持逻辑独立，响应式通过CSS媒体查询而非类名切换。
头部布局该不该拆成独立 Block？
该。只要它具备独立语义、可复用或需单独控制样式/状态，就必须升格为 Block，比如 .page-header 或 .article-header。常见错误是把整个页面的 header 当作全局样式写成 .header，结果在卡片、弹窗、侧边栏里复用时，.header 被意外命中，padding 和 margin 全乱套。
判断标准很简单：
– 是否有自己的一套响应式规则？
– 是否会被多个父容器嵌入（如文章页、编辑页、仪表盘）？
– 是否包含子模块（如搜索框、用户头像、操作按钮），且这些子模块本身也需复用？
满足任一条件，就该独立命名，不依附于外层容器。
标题、副标题、操作按钮怎么命名才不越界？
所有子内容必须显式归属到当前 Block，禁止靠 DOM 层级推导。例如 .page-header 下的元素：标题用 .page-header__title，副标题用 .page-header__subtitle，右上角按钮用 .page-header__action。
容易踩的坑：
– 写成 .page-header__title-icon：图标是标题的一部分，不是独立功能单元，合理；但若图标可点击且带 Tooltip，建议拆成独立 .icon-button Block，再通过 .page-header__action 容器组合
– 写成 .page-header__title--large：尺寸变体应作用于整个 Block（.page-header--compact），而非某个元素——除非“大标题”是该元素独有的视觉契约（如仅在此处放大字号且无其他影响）
– 用 .page-header__meta 混装发布时间、作者、分类：语义模糊，应拆为 .page-header__byline（作者+时间）和 .page-header__tags（分类标签）
立即学习“前端免费学习笔记（深入）”；
多级导航嵌套在头部里，怎么避免命名爆炸？
导航不是头部的子元素，而是独立交互单元。即使它物理上放在 .page-header 内，逻辑上仍是 .nav Block —— 正确写法是：<div class="page-header"><div class="nav"></div></div>。
关键点：
– 不写 .page-header__nav，否则把 nav 的 hover、展开、焦点管理全耦合进 page-header 样式里
– 二级下拉菜单不是 .nav__item__dropdown，而是另一个 .dropdown 实例，加修饰符如 .dropdown--in-header 即可定制定位或动效
– 若需要头部内导航与右侧操作按钮对齐，用 Flex/Grid 布局控制，别靠类名拼接层级（如 .page-header__nav--right-aligned）
响应式切换时，类名要不要跟着改？
不用。BEM 类名描述的是角色，不是位置。移动端把 .page-header__action 从右侧挪到顶部 hamburger 菜单里，类名照旧；变化只发生在 CSS 的 @media 规则中，比如重设 grid-area 或调整 flex-direction。
真正要加修饰符的，是状态变化：
– 折叠后显示为抽屉：加 .page-header__action--drawer-trigger
– 导航收起后显示 badge 提示：加 .nav__item--has-unread
– 但绝不写 .page-header__action--mobile：设备不是语义，行为才是。
最常被忽略的一点：头部内部的子 Block（如 .search-form、.user-avatar）各自响应式逻辑互不干扰，它们的 --compact 或 --collapsed 修饰符，只影响自身，不会污染 .page-header 的布局流。
