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婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！