CSS快速掌握BEM命名规范

BEM并非简单的CSS命名技巧，而是一套通过块（Block）、元素（Element）、修饰符（Modifier）三重结构与严格的双下划线__、双短横--语法约定，强制约束样式作用域、明确组件边界与职责的协作协议；它让每个类名都能清晰反推DOM结构、所属组件及语义意图，彻底杜绝团队中命名混乱、逻辑混杂、维护失焦的顽疾——真正难的不是记住规则，而是每一次敲下类名前，都认真问自己：“它离开这个块，还能独立存在吗？”

什么是BEM，为什么不能直接套用类名 BEM不是语法糖，是约束CSS作用域边界的协作协议。你写.header没问题，但团队里有人补一句.header__logo--dark，另一人却写.header-logo-dark，后续维护时根本分不清这是同一套逻辑还是两套混用。BEM强制用双下划线__分隔块与元素、双短横--分隔修饰符，目的就是让类名本身能反推DOM结构和意图。它不解决样式复用问题，只解决“看到类名就知道它属于谁、起什么作用、有没有变体”这件事。

块（Block）必须是独立可复用的容器 块不是“大盒子”，而是有明确边界和职责的UI单元。比如card、modal、input-group，它们可以单独存在、被复用、不依赖父级上下文。 - card合法，user-card也合法（语义清晰），但homepage-card不推荐——它绑定了页面位置，破坏了块的独立性 - 块名不能带状态或视觉描述，如big-card或red-button，这类信息应该交给修饰符处理 - 一个块对应一个CSS文件（如card.css），所有相关样式都收在里面，不散落

元素（Element）必须用__连接，且不能脱离块单独使用 元素是块的组成部分，不具备独立意义。写card__title可以，但绝不能只写title或card-title。 - 元素名要语义化，避免card__left这种位置描述，改用card__avatar或card__content - 元素不能嵌套元素：禁止card__title__icon，应改为card__title-icon（作为card__title的修饰符）或提升为card__icon（如果它在块层级上确实平等） - BEM不强制DOM嵌套深度匹配命名层级，但建议保持一致；否则card__footer出现在

里就比藏在三层数字节点里更易理解

修饰符（Modifier）要表达“变化”，不是“新增” 修饰符描述块或元素的**状态、主题、尺寸等差异**，不是加新功能。比如button--disabled、card--horizontal、input-group--compact。 - 修饰符必须和块或元素一起出现：button button--disabled，不能单独用button--disabled - 避免修饰符叠加歧义：不要写button--primary--large，改用button button--primary button--large（多个独立修饰符） - CSS中修饰符样式应基于对应块/元素声明，而不是重新定义全部样式。例如.card--horizontal .card__content不如直接写.card--horizontal .card__content配合flex-direction微调，而非重写整个card__content盒模型

BEM最难的部分不在规则本身，而在于每次写类名前得停下来想：“这个东西，离开它所属的块还能不能成立？”——多数人卡在这里，不是不会写__和--，是没想清楚组件边界。

到这里，我们也就讲完了《CSS快速掌握BEM命名规范》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！