一、核心认知BEM 是一套命名约定不是语法全称BBlock 块独立、可复用的组件模块EElement 元素块内部从属节点不能脱离块单独使用MModifier 修饰符描述块 / 元素的状态、变体、外观差异目标 消除样式命名歧义、降低选择器权重、避免深层嵌套、方便团队协作维护。分隔符约定业界主流块 __ 元素双下划线__块 / 元素 -- 修饰符双短横线--多单词使用单短横线-连接✅ 格式模板block block__element block--modifier block__element--modifier二、逐部分拆解1. Block块一个独立功能组件自身有完整语义可以单独复用。命名描述功能不要描述样式/* ✅ 好语义化 */ .card button-group nav-header /* ❌ 差描述外观 */ .red-box big-title块内部可以包含多个元素。2. Element元素属于某个块的子节点不能脱离父块单独使用。 用__和块连接。.card__title .card__content .card__footer❌ 禁止链式多层元素card__content__text元素只允许一层从属深层结构继续当作元素不要无限嵌套。3. Modifier修饰符用来标记状态、样式变体、尺寸。--连接块或者元素。/* 块的修饰符 */ .card--dark .card--borderless /* 元素的修饰符 */ .card__title--primary .card__title--small修饰符不单独存在必须依附在块 / 元素上。 修饰符只追加差异化样式不要重写全部样式。三、标准示例HTMLdiv classcard card--dark h3 classcard__title card__title--primary标题/h3 div classcard__desc描述文本/div /divCSS/* 基础块 */ .card { padding: 16px; border-radius: 8px; } /* 块修饰符 */ .card--dark { background: #1d2129; color: #fff; } /* 块内元素 */ .card__title { font-size: 18px; margin-bottom: 8px; } /* 元素修饰符 */ .card__title--primary { color: #409eff; } .card__desc { font-size: 14px; color: #666; }四、搭配预处理器Less / SCSS写法.card { padding: 16px; --dark { background: #1d2129; } __title { font-size: 18px; --primary { color: #409eff; } } }注意嵌套只是语法糖编译出来依然是标准 BEM 类名不会生成高权重后代选择器。五、关键规则 避坑不要用层级选择器❌.card .title {}容易权重混乱优先用 BEM 类名元素不能跨块nav__card-title错误card 是独立块应该card__title修饰符只做增量样式 不要把基础样式全部写在修饰符内命名看语义不看 DOM 结构 DOM 嵌套很深类名依然保持一层block__element通用工具类不属于 BEM 间距、文字对齐这类工具类单独抽离不和 BEM 混在一起div classcard card--dark mt-12mt-12是工具类不属于 BEM 体系。六、适用场景与边界✅ 适合中大型后台项目、组件库、团队协作项目、长期维护页面 ❌ 没必要简单 Demo、一次性活动页、页面极其简单的场景BEM 不是强制标准是权衡方案 小项目写起来略长但换来极高可维护性。七、和其他命名方案对比原生随意命名简短极易冲突、难维护BEM类名长语义清晰权重扁平适合团队CSS Module编译哈希解决冲突但可读性差不方便直接覆盖调试八、工程落地规范统一分隔符项目内不要混用多种 BEM 变体多单词使用短横线search-form__input-wrap状态优先用修饰符少用is-xxx状态类团队可统一约定公共通用组件块名全局唯一避免跨页面重名冲突