CSS规范之 BEM

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

1 使用css规范的意义 #

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

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

这要求我们编写css时候:

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

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

  • BEM -- Block element modifler
  • OOCSS -- Object oriented CSS
  • SUIT
  • SMACSS -- Scalable and modular architecture for css

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

来源https://ashleynolan.co.uk/blog/frontend-tooling-survey-2019-results

那我们展开说 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 怎么写 #

结合 & 符号

.nav {
  background: blue;
  &__item {
    background: red;
    &--focus,&:hover { background: green; }
  }
}

输出

.nav {}
.nav__item {}
.nav__item--focus, .nav__item:hover {}