CSS规范之 BEM

简单整理一下 css 规范之 BEM 规范

1 使用 css 规范的意义

css 选择器匹配是从右向左进行匹配的,因此同样修改 class 名为 title 的样式,body .demo p span.title.title 相比:

  • 前者匹配过程花费的代价更高。
  • 前者权重更高,改动起来更复杂,

这要求我们编写 css 时候:

  • 不要过度嵌套,或者使用多余复杂的选择器
  • 降低 css 选择器权重
  • 不要为了效率,class 名失去可读性不可维护

经过技术沉淀,已经存在了多种 css 方法论:

  • BEMBlock element modified
  • OOCSSObject oriented CSS
  • SUIT
  • SMACSSScalable and modular architecture for css

其中 BEM 在社区中接受程度最高。据最新调查显示 BEM 接受程度最高。

来源

那我们展开说 BEM

2 什么是 BEM

BEM(Block、 Element、 Modifier)于 2010 年推出,它是将用户界面划分为独立 Block 的一种方法论。

举个例子:

这里有个搜索按钮。有个导航栏。

  • 这个搜索按钮的 class 可能会写成 searchForm__btn;
  • 当这个按钮当前不可用 searchForm__btn--disable;
  • 按钮聚焦 searchForm__btn--focus
  • 导航栏可能写成 .nav
  • 导航栏项目可能写成 .nav__item.navItem
  • 项目被选中可能写成 .nav__item--focus.navItem--focus
  • 被选中的按钮 class 可能是这样 class="nav__item nav__item--focus"

是不是感觉有点奇怪:

  • 一个 Block 是一个可重复使用的部件(例如搜索表单)。
  • Element 为 Block 的一小部分,它不能独立重复使用(如搜索表单内的 button,Search)
  • Modifier 是一个实体,定义为外观、状态、Block 或 Element 中的行为(例如禁用搜索表单里的按钮,定义为 Search)。

优点:

  • 很容易阅读理解,它具有特定的命名规则,新手在应用它时无需做出复杂的决策
  • 降低权重
  • 运用得当可省掉 scoped

缺点:

  • 它的缺点是类名非常冗长,并且不遵循传统的规则来编写语义类名。

缺点怎么避免:

  • 结合 Atomic CSS
  • 及时合并缩写
  • 前面加前缀 .g-nav .home-nav

我们再来看个例子

3 less 怎么写

结合 & 符号

1
2
3
4
5
6
7
8
9
10
.nav {
background: blue;
&__item {
background: red;
&--focus,
&:hover {
background: green;
}
}
}

输出

1
2
3
4
5
6
7
.nav {
}
.nav__item {
}
.nav__item--focus,
.nav__item:hover {
}

请我喝杯咖啡吧~