17370845950

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 这类描述性弱的词。