三分钟学会 BEM 命名法

学习总结
BEM,CSS命名,命名法

BEM 指的是 Block、Element、Modifier，BEM 命名法把 CSS 类名归纳为这三种类型。

Block

封装一个具有独立意义的实体，如 header、 container、 menu、 checkbox、input。

Block可以相互嵌套，但是在语意上让他们保持相互的独立，没有优先级或层次结构。

命名

由字母、数字和破折号组成。

.list {}
.cate-list {}

注意点

  • 仅使用类名选择器，不能使用标签名或 ID
  • 不依赖页面上的其他 Block/Elements，不存在级联选择器
<div class="block">...</div>

// bad
.block-a .block-b {}

// good
.block {}

允许以下这种情况：

.category {}
.category-tab {}
.category-main {}
.category-banner {}

注意，这种情况存在合理的，因为：

  • 组件复杂、颗粒度大，可以拆分独立重复使用的模块
  • 这相当于css 命名上拆成了4 个组件，使用者其实不关心内部的css 命名，bem 主要能解决样式重名的问题就好

Element

在给定的 Block 内的任何 DOM 都可以成为一个 Element，在语意上属于 Block 的一部分，如 menu item、 list item、checkbox caption、header title。

命名

由 Block 名称加两个下划线加 Element 名称构成，Element 名称同样支持字母、数字、破折号。

.block__element {}
.block__element-val {}

注意点

  • 仅使用类名选择器，不能使用标签名或 ID
  • 不依赖页面上的其他 Block/Elements，不存在级联选择器
  • 可以基于 Block 的状态进行行为改变
<div class="block">
  <span class="block__elem"></span>
</div>

// bad
.block .block__elem {}

// good
.block__elem {}

// good：基于 block 状态变化的 elem
.block--mod .block__elem {}

Modifier

指向 Block 或者 Element 的状态修饰，用来改变外观或行为，如 disabled、 highlighted、 checked、 fixed、 size big、color yellow。

命名

由 Block 或 Element 的命名加上两个破折号加上 Modifier 名称。

.block--mod {}
.block__element--mod {}

注意点

  • 作为 Block、Element 的类名中额外的扩展，不能单独使用
<div class="block block--mod">
  <div class="block__elem">...</div>
</div>

<div class="block block--size-big block--color-red">...</div>

// bad
.block--color--red {}

// good：作为 block 的状态修饰
.block--color-red {}

// good：作为 elem 的状态修饰
.block__elem--mod {}

优点

模块化

Block 样式不需要依赖页面上的其他元素，每个Block 样式都是独立的。

重用性

以不同的方式组成独立的 Blocks，减少可维护css代码量。

在复用样式的时候，完全可以直接迁移，而不考虑是否有级联样式的遗漏。

结构化

如果样式命名符合 BEM 命名法的规则，那么从 CSS 代码分析就可以快速了解对应的 HTML DOM 结构。

参考