BEM 中 header 必须用语义化 block 名如 .page-header，禁用泛称 .header；子元素须带完整前缀如 .page-header__logo；响应式靠 grid-area 和 modifier 控制，不重命名类；样式须物理隔离，按职责拆分文件。

Header 不能叫 .header，得是语义化 Block 名

直接写 .header 是最常踩的坑——它没归属、不可复用、搜不到上下文。BEM 要求 block 名必须反映业务角色，比如 .page-header 或 .dashboard-header，而不是泛泛的容器名。.header 在项目里一搜一大片，根本分不清是登录页的 header 还是后台管理页的 header。

常见错误：.layout__header → “layout” 是模糊词，既不是页面类型，也不对应真实 DOM 角色；.main-header → “main” 是相对概念，脱离上下文就失效。

• .page-header 可独立维护，模板里直接搜就能定位全部样式和使用点
• 如果 header 出现在多个业务场景（如仪表盘、用户中心、产品页），应按场景拆成 .dashboard-header、.profile-header 等，不共用同一份 CSS
• 禁止在组件文件里定义 page-header 样式——它必须独占一个 /styles/layout/PageHeader.css

Header 内部元素必须带完整 Block 前缀，禁用嵌套选择器

写 .page-header__logo 没问题，但写 .page-header .logo 就等于放弃 BEM。后者依赖 DOM 层级，一旦 header 外层加了个

，样式立刻失效；而且 .logo 容易被其他模块的同名类污染。

更危险的是这种写法：.page-header .nav .menu-item a——四层嵌套，权重高、难覆盖、无法复用。

• 所有子元素都用完整路径：.page-header__logo、.page-header__user-menu、.page-header__search-form
• CSS 规则只基于单个类名，不写任何空格分隔的选择器
• 如果某区域逻辑独立（如右上角通知面板），应升格为独立 block：.notification-badge，而非 .page-header__notification-badge

Header 的响应式行为不该靠重命名，而该靠 grid-area 和 modifier

移动端把 logo 和菜单横排变竖排，不需要新增 .page-header--mobile 或 .page-header__nav--stacked。BEM 类名描述的是语义角色，不是视觉排列方式。

真正该动的是 CSS 中的布局声明：用 grid-template-areas 控制区域流向，用 --modifier 表达状态（如 .page-header--collapsed），而不是设备或位置。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• 保持 HTML 类名不变：
• 媒体查询中改 grid-area 值，或调整 display: grid / flex 的列数与方向
• 若需交互态变化（如折叠导航），用 .page-header--nav-collapsed，而非 .page-header__nav--mobile
• 避免 @media 内出现 .page-header .nav 这类嵌套——它违背了 BEM 的作用域隔离前提

全局 Header 样式和组件样式必须物理分离

.page-header__logo 和 .card__logo 不会冲突，前提是它们不在同一份 CSS 文件里打包。BEM 类名本身只是字符串，浏览器照单全收；真正防冲突的是构建阶段的隔离策略。

如果两个类都被打进 app.css，且 .page-header__logo 定义在后，它就会覆盖 .card__logo 的同名属性（比如 margin）——BEM 不改变层叠规则。

• PageHeader.css 只管容器流式规则：display: grid、min-height、padding，避开颜色/字体等易冲突属性
• Logo.module.css 用 CSS Modules 编译出哈希类名，确保视觉细节不泄漏
• 禁止在 PageHeader.css 里写 .button 或 .icon 的样式——那是组件自己的事

复杂点在于：很多人以为把类名写长就安全了，其实真正的隔离靠的是文件组织 + 构建约束 + 命名归属三者咬合。少一个，header 就可能在某个迭代后突然变蓝、错位、或无法复用。