内容简介:在公司项目中,我们一直class名称遵循bem规范,但是在使用中,也发现了一些不方便的地方为了简化bem规范的使用复杂度,我借鉴了几个框架的方法,打造了一款比较简单易用的插件库在这个插件库中,为了更符合常用的组件库样式的命名,在bem规范基础上,我又新增了一个命名空间(namespace)概念,变成了nbem,如京东taro-ui框架输入框的样式
在公司项目中,我们一直class名称遵循bem规范,但是在使用中,也发现了一些不方便的地方
- class名称比较长,写起来比较麻烦,一个dialog文字位置的样式需要写成
ns-dialog__title--center - 在使用多个class时候需要拼字符串,特别是如果存在条件判断的样式,还需要进行if判断 下图是蚂蚁金服 ant design 框架的一段样式处理,虽然进行了包装处理,但是还是稍显麻烦
解决方案
为了简化bem规范的使用复杂度,我借鉴了几个框架的方法,打造了一款比较简单易用的插件库 css-bem ( github.com/snowzijun/c… )。
在这个插件库中,为了更符合常用的组件库样式的命名,在bem规范基础上,我又新增了一个命名空间(namespace)概念,变成了nbem,如京东taro-ui框架输入框的样式 at-input__overlay--hidden , at 为 namespace , input 为 block , overlay 为 element , hidden 为 modifier
安装
npm install css-bem
import cssBem from 'css-bem'
复制代码
基本用法(以react开发Button组件为例)
import cssBem from 'css-bem'
// 声明 namespace 与 block
const nbem = cssBem('zj','button')
// 组件
export default class Button extends React.Component{
static propTypes={
type:PropTypes.string,
plain:PropTypes.bool,
disabled: PropTypes.bool
}
render(){
const {type,plain,disabled} = this.props
return (
<button className={nbem([type,{disabled,plain}])}>
<span className={nbem('text')}>按钮文字</span>
</button>
)
}
}
// 页面
export default class Page extends React.Component{
render(){
// 设置按钮 type为primary,plain为false disabled为true
return <Button type='primary' plain={false} disabled></Button>
}
}
// 渲染结果
<button class='zj-button zj-button--primary zj-button--disabled'>
<span class='zj-button__text'>按钮文字</span>
</button>
复制代码
api说明
// namespace可省略不写 如 cssBem('button')
const nbem = cssBem('zj','button')
nbem() // zj-button
nbem('text') // zj-button__text
nbem(['primary']) // zj-button zj-button--primary
nbem({disabled:true,plain:false}) // zj-button zj-button--disabled
nbem(['primary',{disabled:true}]) // zj-button zj-button--primary zj-button--disabled
nbem('text',['large',{show:true}]) // zj-button__text zj-button__text--large zj-button__text--show
复制代码
React 高阶组件
// 使用装饰器
import {injectBem} from 'css-bem'
@injectBem('zj','button')
export default class Button extends React.Component{
render(){
const {type,plain,disabled} = this.props
const { classnames } = this
return <button className={classnames([type,{disabled,plain}])}>
<span className={classnames('text')}>按钮文字</span>
</button>
}
}
//使用高阶组件
class Button extends React.Component{
// 内容与装饰器一直
}
export default injectBem('zj','button')(Button)
复制代码
Vue mixins
import {vueMixin} from 'css-bem'
export default{
mixins:[vueMixin('zj','button')]
}
<template>
<button :class="classnames([type,{disabled,plain}])">
<span :class="classnames('text')">按钮文字</span>
</button>
</template>
复制代码
其他说明
// 不使用namespace与block
import {flatten} from 'css-bem'
flatten('header',['header__text',{
'header__icon--show':false,
'header--dark':true
}])
/**输出
'header header__text header--dark'
*/
复制代码
以上所述就是小编给大家介绍的《记一次bem命名规范使用优化方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入理解Java虚拟机(第2版)
周志明 / 机械工业出版社 / 2013-9-1 / 79.00元
《深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)》内容简介:第1版两年内印刷近10次,4家网上书店的评论近4?000条,98%以上的评论全部为5星级的好评,是整个Java图书领域公认的经典著作和超级畅销书,繁体版在台湾也十分受欢迎。第2版在第1版的基础上做了很大的改进:根据最新的JDK 1.7对全书内容进行了全面的升级和补充;增加了大量处理各种常见JVM问题的技巧和最佳实践;增加了若干......一起来看看 《深入理解Java虚拟机(第2版)》 这本书的介绍吧!