BEM 的三层结构是 block（独立功能模块）、element（block 的子部件）、modifier（改变状态或样式的开关），如 search 是 block，search__input 是 element，search--large 是 modifier。
什么是 BEM 的 block、element、modifier 三层结构
BEM 把一个 UI 组件拆成三个语义层级：block（独立功能模块）、element（属于 block 的子部件）、modifier（改变状态或样式的开关）。比如一个搜索框组件，search 是 block，search__input 和 search__button 是 element，search--large 或 search__button--disabled 是 modifier。
关键不是“命名长”，而是让每个类名自带上下文：看到 card__title--highlighted 就知道它属于 card 模块里的标题，且处于高亮状态，不依赖嵌套选择器或父级作用域。
为什么不用嵌套写法而坚持双下划线和双破折号
用 __ 分隔 block 和 element、-- 表示 modifier，是为规避 CSS 选择器的隐式依赖。一旦写成 .card .title，就无法保证 .title 只在 .card 内生效；而 card__title 是扁平、唯一、可全局搜索的字符串。
-
card__title能直接在 HTML 中定位到对应 DOM，也能在 CSS 文件里 Ctrl+F 查到全部定义 - 避免因 DOM 结构微调（比如加一层
div）导致样式失效 - 支持 CSS-in-JS 或原子化方案（如 Tailwind）之外的“语义优先”路径
-
工具链友好：PostCSS 插件（如
postcss-bem）能基于 BEM 规则自动补全或校验
常见误用：modifier 放错层级或滥用布尔值
Modifier 必须绑定到明确的 block 或 element 上，不能脱离主体存在。错误写法如 btn--primary 单独出现，却没定义 btn；或把状态类写成 is-active 这类无上下文的通用名。
正确做法：
- 修饰 block：
menu--vertical（整个菜单切换为垂直布局） - 修饰 element：
menu__item--current（仅当前菜单项高亮） - 避免纯布尔名：
button--loading比button--is-loading更简洁，也比loading更安全 - 不复合 modifier：
button--primary--small不推荐，应合并为button--primary-small或拆成两个独立 modifier
实际项目中如何落地而不增加维护成本
BEM 不是命名仪式，核心是约束人脑对样式的联想路径。小项目可手动遵守；中大型项目建议配合构建工具固化规则。
- HTML 模板中直接写
class="header__logo header__logo--inverse"，不拼接字符串 - 用 Prettier + stylelint 配置
selector-class-pattern规则，自动报错不符合 BEM 的类名 - 组件化框架（React/Vue）里，把 block 名作为组件名前缀，例如
ProductCard对应product-card，其子元素自然映射为product-card__image - 注意 CSS 作用域：BEM 不解决全局污染，需配合 CSS Modules 或 Shadow DOM 使用，否则
button__text仍可能被其他模块的同名类覆盖
最易被忽略的一点：BEM 类名一旦写进 HTML，就成为接口契约。改名不只是改 CSS，还要同步更新所有模板、测试用例甚至文档截图——所以初期定名要带业务语义，别用 section-2 或 wrap 这类描述性弱的词。
