BEM通过块（Block）、元素（Element）、修饰符（Modifier）明确样式责任边界，避免全局污染和意外覆盖；正确命名如.header__logo、header__nav-item确保上下文归属与可维护性。
页头样式为什么一改就崩？BEM不是套名字，是划清责任边界
因为 header 里 .logo 和 .nav 共享同一层 CSS 作用域，改个 margin 可能同时影响两者，而开发者往往只记得自己改了啥，不记得别人上周在 .nav-item 里加了个 display: inline-block 导致 .logo 垂直对齐错乱。
用 BEM 拆，本质是把「谁负责什么」写进类名里，而不是靠注释或默契：
-
.header是块（Block），它不直接管样式细节，只定义容器布局和基础约束 -
.header__logo和.header__nav是元素（Element），各自封装尺寸、间距、颜色等，互不干扰 -
.header__nav--mobile是修饰符（Modifier），只改.header__nav的某一种状态，不影响默认行为
别把 .header-logo 当 BEM —— 缺少双下划线，就等于没声明「这是 header 的子元素」，后续想抽离 logo 成独立组件时，样式会漏掉上下文依赖。
Logo 和导航的 BEM 类名怎么起才不踩坑
常见错误是把语义当结构：比如写成 .logo-wrapper + .nav-list，看似清晰，但脱离了 header 上下文，未来在 footer 或弹窗里复用同一套 logo 样式时，就得复制粘贴或加 !important。
正确做法是让类名自带「归属感」和「不可替代性」：
- Logo 部分统一用
.header__logo，内部子元素按需延伸：.header__logo-icon、.header__logo-text - 导航部分用
.header__nav，列表项必须带前缀：.header__nav-item，链接用.header__nav-link - 禁止出现
.logo或.nav这种孤立类名 —— 它们没有 Block 前缀，就等于裸奔，无法被 scoped 或局部覆盖
如果项目用 CSS-in-JS 或 Shadow DOM，BEM 依然有效：header__logo 是逻辑标识，不是单纯为了 class 字符串好看。
响应式切换时，BEM 修饰符比媒体查询更可控
很多人在 @media (max-width: 768px) 里重写一堆 .header__nav 样式，结果桌面端改个 padding，移动端的 flex-direction 就错位 —— 因为两套规则挤在同一选择器下，权重和覆盖顺序难追溯。
用修饰符把状态显式表达出来，能切断意外继承：
- 默认导航：
- 移动端展开态：
- 对应 CSS 写成
.header__nav--expanded独立规则块，不嵌套、不依赖父级 media 查询位置
这样调试时，只要看 HTML 上有没有 --expanded，就知道当前走哪条样式路径；JavaScript 控制开关也只需增删这个类，不碰样式表。
CSS 文件组织：一个 Block 对应一个文件，但别拆过细
有人把 .header__logo 单独提成 logo.css，再把 .header__nav 提成 nav.css，结果编译后生成十几个小文件，HTTP 请求翻倍，缓存失效频繁。
合理拆分是按 Block 主体，不是按 Element：
- 保留
header.css作为唯一入口，里面包含.header、.header__logo、.header__nav及其所有修饰符 - 如果项目真有独立
logo组件（比如用在登录页、邮件模板），再单独建logo.css，但它的类名必须是.logo（无前缀），和.header__logo完全隔离 - 所有
header__*相关样式禁止散落在layout.css或common.css里 —— 否则改一个font-size得全局 grep
BEM 的维护性不在命名多炫，而在你删掉 header.css 后，整个页头视觉是否彻底消失、且不报错。能做到这点，才算真正划清了边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
