CSS-BEM 命名规范

BEM 中文官方文档
BEM 英文官方文档

BEM 是一种 组件化 的 CSS 命名方法和规范。让开发更加规范与便捷，利于团队协作和维护。

一、BEM 的核心模块

• 块层（ block）：
  • 块表示一个功能独立的页面组件，是一个组件的 class 属性。例如：dialog 弹窗。
  • 可以单独使用、可以相互嵌套。
• 元素层（ element）：
  • 元素是块的组成部分，是依赖上下文的。元素的名称用于描述它是什么，而不是它的状态。元素在所属的块中指定位置时，才能表现出应有的功能。例如：button 按钮
  • 不能单独使用，要跟在 “块” 后。
• 修饰符层（ modifier)：
  • 用于描述一个块或者元素的外观与行为的特征。例如：blue 蓝色。
  • 不能单独使用，要跟在 “块” 或 “元素” 后。

二、BEM 的连接符

BEM 语法：块__元素--修饰符（B__E--M），例如：.dialog__btn--black{}。

• __ 双下划线：用于分隔块名称与元素名称。例如：.dialog__btn{} .dialog{}。
• -- 双中划线：用于分隔块名称与修饰符 或 元素名称与修饰符。例如：.dialog--dark{} 或 .btn--blue {}。
• - 单中划线或 _ 单下划线 ：连接由多个单词所构成的一个块或一个元素。例如：el-dialog 或 el_name。也可以使用驼峰命名，例如：elName。

三、BEM 的不足

命名太长。

四、BEM 命名的注意事项

• 使用混合拆分样式：
  • 尽量保持块的样式独立，让选择器扁平化。
  • 不在块里设置位置、布局相关的样式，只设置基本样式。
  • 通过混合的方式，在作为父级块的元素时设置布局样式。
  • 适时拆分元素为独立的块，解耦样式并形成新的命名空间。
• 适时使用嵌套选择器
  • 保持低权重，让选择器的嵌套层级越少越好。因为 CSS 的权重问题很多人处理不好，最终很可能导致不停的嵌套或为了增加权重而进行的无意义嵌套和 !important，这无疑增加了代码的耦合。
• 开放封闭原则
  • 开放封闭原则是所有面向对象原则的核心，是说软件实体应该是可扩展，而不可修改的。即对扩展是开放的，而对修改是封闭的。如果将这个原则应用到BEM的使用上，就是说我们应该使用modifier去拓展block或element的样式，而不应该去修改block或element的基础样式。

五、什么时候使用 BEM？

当我们使用 BEM 方法命名时，我们要知道哪些东西是应该使用 BEM 格式的。因为并不是每个地方都应该使用 BEM 命名方式，只有当需要明确关联性的模块关系时，才需要使用 BEM 格式。

六、BEM 的使用案例

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

【参考文章】
CSS之BEM命名规范
CSS命名规范–BEM
CSS-BEM命名规范
CSS — BEM 命名规范
CSS 架构之 BEM
CSS的BEM规范