css BEM 命名规范

601 阅读1分钟

最近打算自己写一个组件库,不知道从何下手所以阅读了一下element-ui的源码, 在看css的时候发现element-ui采用的是EMB抱着好奇的心态查找了一下资料, 发现这是一种css结构化的命名规范。

类似于: .Block{} .Bloc__Element{} .Block--Modifier{}

Block: 误区这不是css里面的inline-block里的block,而是一个块,或者你可以把他 理解成一个独立的模块。

element: 可以把它理解成块下面的元素,无论块下面有多少个元素层级如何都要摊开扁平的属于块

modifier: 可以把它理解成修饰符,用于修饰元素或者块的状态,比如我们经常写的 .current .active 等表达状态

element-ui里面button的css:

.el-button //这就相当于一个独立的button块 .el-button--primary //这就是修饰符,修饰button块的状态 //那么你如果想在button块里面添加一个元素这个元素的css就应该是 .el-button__Element

好处: 语义化明确结构清晰明了。一眼看去就是一个层级关系 .el-button .el-button--primary .el-button__Element

坏处: css代码写的很长,额外工作量,写起来很麻烦

第一次写文档,不咋会写,有啥地方写的有问题的望大神留言。