当前位置: 首页 > Web前端 > CSS

在组件库中使用BEM

时间:2023-03-30 22:55:17 CSS

bem的优势。最近开发了一个组件库,选择了BEM作为css的组织形式。我主要考虑了以下三个优点:逻辑分层,通俗易懂。BEM基于block、element、modify的组织形式,与组件的组织形式基本匹配。只要遵循BEM的命名方式,就可以直观的看出开发修改组件时已经存在哪些元素和状态。反过来,通过html标签的BEM命名,可以直观的了解组件的功能和依赖关系。强约束有利于团队合作。只要定义好大框架和命名,团队其他成员就可以基于BEM规范进行开发,理解成本降低,基本不存在风格冲突。预编译器支持目前常用的css预编译器,如sass、less、stylus,基本对BEM都支持的很好。例如(语法差异暂时忽略):.block{&__element{}&--modifier{}}编译后:.block{}.block__element{}.block--modifier{}