CSS BEM 命名规范

BEM
写过前端的童鞋知道,CSS 好学但不好写。一周时间,你读完文档,你可能会上手写 CSS 了,可要写好 CSS 或许还要花上数年时间。
这里我们说下 CSS 的命名规范。关于 CSS 的命名并没有对错之分,只是不同的命名方式和代码规范对日后的维护起着很大的作用。

什么是 BEM

BEM 的本质其实只是一个 css 命名方案。

BEM is a highly useful, powerful and simple naming convention to make your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit and a lot more strict.(BEM 是一个非常有用,强大和简单的命名规范,使您的前端代码更容易阅读和理解,更容易使用,更容易扩展,更强大和更明确,更严格。)

以上是 BEM官网 的解释,可以知道它就是一个命名方案,那么它的规范是怎样的?为什么说它更容易阅读也更容易扩展呢?我们下面来看看 BEM 的具体命名规范。

BEM 规范详解

1.Block (块)

独立的模块,可复用的 UI 单元;

命名规范

块名称可以由拉丁字母,数字和短划线组成。 如:.block

2.Element (元素)

模块内的组成元素。元素是依赖上下文的:它们只有处于他们应该属于的块的上下文中时才是有意义的。

命名规范

元素名称可以包含拉丁字母,数字,破折号和下划线。 CSS类名写成块名称加上两个下划线加上元素名称:.block__elem

3.Modifier (修饰符)

模块或元素的状态。用来形容元素或块的外观、行为或状态。例如 button、a 标签上的 active 状态。

命名规范

修饰符名称可以包含拉丁字母,数字,破折号和下划线。 CSS 类名写成块或元素的名称加上两个破折号:.block–mod 或 .block__elem–mod和.block–color-black。

举个例子

如下面一段 CSS 结构

1
2
3
4
.page-header-nav
.page-header-item.page-header-nav-item--small
.page-header-nav-item__icon
.page-header-nav-item__text

CSS 中可以这样写

1
2
3
4
5
.page-header-nav
&-item
&--small
&__icon
&__text

一些注意的地方

  • Block 间可以相互嵌套
  • Block 应该含有一个合理的命名空间
  • BEM 减少重用性,可以定义模块提高重用性
  • 不是所有的地方都要用 BEM, 但推荐用

下一步

思考如何更好的使用 BEM 命名规范