组件库使用BEM

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 {
}