内容简介:在公司项目中,我们一直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命名规范使用优化方案》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
产品经理必懂的技术那点事儿:成为全栈产品经理
唐韧 / 电子工业出版社 / 2018-1 / 59
《产品经理必懂的技术那点事儿:成为全栈产品经理》以非技术背景产品经理学习技术为主题,将技术知识以简单并且易于理解的方式讲述出来,帮助非技术背景产品经理了解技术、学习技术,旨在帮助产品经理高效地与技术人员进行沟通与合作,避免不懂技术带来的困扰。 《产品经理必懂的技术那点事儿:成为全栈产品经理》主要内容围绕产品经理需要了解的互联网基础技术知识展开,涉及客户端、服务器端、数据库及一些数据处理知识。......一起来看看 《产品经理必懂的技术那点事儿:成为全栈产品经理》 这本书的介绍吧!