组件库使用BEM

3

bem的优势

最近在开发一个组件库,选择了BEM作为css的组织形式,主要考虑了以下三个方面的优势:

  1. 逻辑分层,容易理解。BEM基于block、element、modify的组织形式,基本与组件的组织形式吻合。只要遵循了BEM的命名方式,对于开发和修改组件,哪些元素和状态已经存在,都可以直观的看出来。反过来,通过html标记的BEM命名,可以直观地理解组件的功能和依赖关系。
  2. 强约束,便于团队协作。只要定义好了大的框架和命名,那么团队其他成员基于BEM的规范进行开发,理解成本降低,而且基本不存在样式冲突的问题。

预编译器支持

目前常用的css预编译器,如sass、less、stylus,基本对BEM的支持都很好,举个例子(语法差异暂时忽略):

.block {
    &__element {
    }
    &--modifier {
    }
}

编译后:

.block {
}
.block__element {
}
.block--modifier {
}

你可能感兴趣的

载入中...