记一次bem命名规范使用优化方案

栏目: Html · 发布时间: 5年前

内容简介:在公司项目中,我们一直class名称遵循bem规范,但是在使用中,也发现了一些不方便的地方为了简化bem规范的使用复杂度,我借鉴了几个框架的方法,打造了一款比较简单易用的插件库在这个插件库中,为了更符合常用的组件库样式的命名,在bem规范基础上,我又新增了一个命名空间(namespace)概念,变成了nbem,如京东taro-ui框架输入框的样式

在公司项目中,我们一直class名称遵循bem规范,但是在使用中,也发现了一些不方便的地方

  • class名称比较长,写起来比较麻烦,一个dialog文字位置的样式需要写成 ns-dialog__title--center
  • 在使用多个class时候需要拼字符串,特别是如果存在条件判断的样式,还需要进行if判断 下图是蚂蚁金服 ant design 框架的一段样式处理,虽然进行了包装处理,但是还是稍显麻烦
    记一次bem命名规范使用优化方案

解决方案

为了简化bem规范的使用复杂度,我借鉴了几个框架的方法,打造了一款比较简单易用的插件库 css-bem ( github.com/snowzijun/c… )。

在这个插件库中,为了更符合常用的组件库样式的命名,在bem规范基础上,我又新增了一个命名空间(namespace)概念,变成了nbem,如京东taro-ui框架输入框的样式 at-input__overlay--hidden , atnamespace , inputblock , overlayelement , hiddenmodifier

安装

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

《产品经理必懂的技术那点事儿:成为全栈产品经理》以非技术背景产品经理学习技术为主题,将技术知识以简单并且易于理解的方式讲述出来,帮助非技术背景产品经理了解技术、学习技术,旨在帮助产品经理高效地与技术人员进行沟通与合作,避免不懂技术带来的困扰。 《产品经理必懂的技术那点事儿:成为全栈产品经理》主要内容围绕产品经理需要了解的互联网基础技术知识展开,涉及客户端、服务器端、数据库及一些数据处理知识。......一起来看看 《产品经理必懂的技术那点事儿:成为全栈产品经理》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码