这是我参与更文挑战的第1天，活动详情查看：查看挑战

随着前端发展，语义化显得越来越重要。从html标签，到js的驼峰，都是一种规范的法则。作为前端而言css的规范显得不是那么重要，是时候安利一下css的规范。走起～～

BEM命名规范

BEM含义：

B -> block(块）

代表的是一个组件，一个容器。只是用来描述这个容器的功能，以及展示，不包含状态。

     <div class="header/ footer / nav /content">
     </div>

常见的.header{} .footer{} 等。 在block模块中不要写组件的样式，以及状态。

   .header{
       width: 100px;  // error(不符合bem的规范)
   }

block不要使用选择器

   .header a {
      margin-top: 50px;  // // error(不符合bem的规范)
    }

E -> element(元素）

可以理解为在block下面划分对应的区域。不能脱离block存在，用一个双下划线和block隔开。

.header__body {
    margin-top: 50px;   // 写入对应的元素的位置关系和样式，header下面的body
    background: ###
}

.header__logo {
    margin-top: 50px;  // header下面的logo
     background: ###
}

.header__title {
    margin-top: 50px;   // title
     background: ###
}

在element里面写要注意一下顺序：个人觉得按照元素大小，位置关系，样式的顺序依次写(只是为了规范），写不写无所谓的。

 .header__title {
    width: 100px;  // 大小
    margin_left: 10px;  // 位置
    color: #fff;  // 样式
  }

M -> modifier(状态)

在E或者B后面用双横杠分开。很好理解：一个元素在某种特定情况下的展示的样式。比如：一个button普通情况的颜色，紧急情况的颜色。一个list选中时候的样式等。

 .header__button--primary {
    color: blue;            // primary 对应的颜色
}
.header__button--danger {
    color: red;
}

在预处理器语言中的使用

在sass中的使用

很简单&符号连接

.header {
    &__title {
        wdith: 100px;
        padding: 20px;
    }

    &__button {
        &--primary {
            background: blue;
        }
        &--default {
            background: white;
        }
    }
}

在less中使用

@符号引入就好(个人在开发中less写法较多，比较推荐）

@classname: header;

.@{classname} {
    .@{classname}__body {
        wdith: 100px;
        padding: 20px;
    }
    .@{classname}__button {
        .@{classname}__button--primary {
            background: blue;
        }
        .@{classname}__button--default {
            background: white;
        }
    }
}

less配合函数实现bem规范

less可以通过变量的形式传入。可以先写好对应的less样式，然后传入不同的名称实现复用。

createNameSpace函数

function gen(name, mods) {
   if (!mods) {
     return '';
   }

   if (typeof mods === 'string') {
     return ` ${name}--${mods}`;
   }

   if (Array.isArray(mods)) {
     return mods.reduce<string> ((ret, item) => ret + gen(name, item), '');
   }

   return Object.keys(mods).reduce(
     (ret, key) => ret + (mods[key] ? gen(name, key) : ''),
     ''
   );
 }

通过gen方法生成符合要求的bem命名规范。

      function bem(name: string) {
       return function (el?: Mods, mods?: Mods): Mods {
         if (el && typeof el !== 'string') {
           mods = el;
           el = '';
         }

         el = el ? `${name}__${el}` : name;
         return `${el}${gen(el, mods)}`;
       };
     }

最后返回类似BEM格式的class类名。

之后我们在对应的组件中使用就好：

        class={[
                bem('item', { disabled: value === 1 }),
                bem('prev')
              ]}
              
            

最后会自动的在对应的less文件中匹配生成style

&__item {
    flex: 1;
    box-sizing: border-box;
    min-width: @pagination-item-width;
    height: @pagination-height;
    cursor: pointer;
    user-select: none; &:active {
        color: @white;
        background-color: @pagination-item-default-color;
    }

    &::after {
        border-width: @border-width-base 0 @border-width-base @border-width-base;
    }
    

最先看的这种写法的是vant组件使用，有兴趣的可以去阅读一下源码。