样式命名有多难?浅谈BEM命名规范⚡

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

前言✍️

最近在搭本身的组件库，关于CSS预处理器用的是SCSS。
对于样式的命名使用了BEM，借此机会分享一下。

怎么命名🔥

样式命名有多难

我之前以为这是一个特别特别难的问题，这难的有恐怖呢，这就像产品让我作一个页面但没有设计图甚至原型图只是几个框框的状况下让我作的特别好看，色彩特别鲜艳同样，真是有（tian）点（da）困（lei）难（pi）🤏。
你们有没有遇到一种状况就是再写一个模块的时候它的内容给他样式命名container，那他的左边内容呢？右边内容呢？left-container?right-container?若是内容里面还有内容呢，原谅我英语很差，我仍是会想用container，要疯🤷‍♂️。
class既要表达清楚这个样式表明什么又要不能有重复，样式重复的后果你们懂的都懂，因此我才说这对大部分前端来讲是挺难的一个问题，但对一小部分前端程序员来讲根本不值一提，为何这么说呢？由于我碰见过名字按顺序one，two和three来排列的class名，我想这可能对他们来讲不算什么事吧🤦‍♂️。
开个玩笑，在正常状况下，咱们对样式进行命名的时候都会去查对应模块的英文来进行命名（英文好的当我没说），起一个独一无二的名字。
但事实上咱们不能保证咱们"当时认为独一无二的名字"就是"独一无二的"，当咱们给一个tab加动态时可能会用到actived来表明被激活 被选中，用了这个以后本能的其余的模块动态仍是会想用这个名字actived，若是有同感的能够留个赞了，说明咱们是一类人哈哈哈😵。
有的同窗可能会说，哎呀能跑就行不冲突就行反正客户又不会看你源码管你写的好很差看，但试想一下若是这个项目不是你一我的开发呢，当涉及到更大、更复杂的项目时，你如何组织代码是提升效率的关键！若是你提桶了以后轮到别人接手呢？别人看着你的代码就会跟别人抱怨："看！这人写的什么屎山！" 是否是你曾经也这样吐槽过别人呢🙇。

关于BEM🌊

BEM是什么

BEM — Block Element Modifier 是一种帮助您在前端开发中建立可重用组件和代码共享的方法，由 Yandex 团队提出的一种前端 CSS 命名方法论。
所谓BEM说白了就是把样式按照B E M三种来进行命名。

BEM:前端
- B - Block 一个独立的模块，一个自己就有意义的独立实体好比：header、menu、container
- E - Element 元素,块的一部分可是自身没有独立的含义好比：header title、container input
- M - Modifier 修饰符，块或者元素的一些状态或者属性标志好比：small、checked

BEM使用

知道了BEM的基本概念后接下来就是使用了，上面我也说了，说白了BEM也就是把三个链接在一块儿组成一个class名,那怎么链接他们三呢？
BEM提出的一个概念是用链接符号来表达,它并不规定必须用什么链接符,但规定用不一样链接符作团队内约定区分BEM 3类元素。
B其实能够理解成一个模块，就好比Element的el-button、Ant Design的ant-btn。
E的链接用官方的方式就是块名称加两个下划线加元素名称构成（ __ ）就好比Element的el-radio__input。
M的链接用官方的方式就是.block__elem--mod，就好比Element的el-button--small、vant的van-button--danger。

BEM的好处

能够发现不少开源优秀的组件库都是用的BEM规范来命名，那为何会这么受欢迎呢？
要知道咱们用一个技术或者框架或者规范目的都是只有一个，让本身更舒服，就好像编辑器装插件，不用原生js开发而用框架开发一个道理。
方便查看 BEM可让开发人员在样式命名上就知道这个样式属于哪里，从名字就能够知道某个标记的含义，假设一个样式命名left-content,光是找这个样式在哪里就已经很麻烦了。
结构明了在咱们用scss和less预处理器的时候都习惯嵌套不少层，但有了BEM命名后模块层级关系简单清晰，并且css书写上也没必要做过多的层级选择。
可复用性 在写了一个元素的样式后须要对他的修饰符进行拼接样式修改，咱们在scss中可使用@mixin作些处理拼接E和M放到公共的scss中别的地方再进行复用,就好比element的mixins配置。

示例

说了这么多光看文字也烦了吧，仍是放个简单的代码示例出来你们品吧,下面是一个按钮的组件封装。git

<template>
  <button
    class="zl-button"
    :class="[
      type ? 'zl-button--' + type : '',
      size ? 'zl-button--' + size : ''
    ]"
    type="button"
  >
    <slot />
  </button>
</template>
<script>
export default {
  name: 'ZlButton',
  props: {
    type: {
      validator (value) {
          return oneOf(value, ['default', 'primary', 'info', 'success', 'warning', 'danger']);
      },
      type: String,
      default: 'default'
    },
    size:{
      validator (value) {
          return oneOf(value, ['','medium', 'small', 'mini']);
      },
      type: String,
      default: ''
    }
  }
};
</script>
复制代码

zl-button能够看到这里用了B的链接。
zl-button--small能够看到这里用了B+M中间用--链接起来来表明块和修饰符链接。

写在最后👋

对于样式的规范其实也没有那么难，只是平时为了追求速度而放弃了规范，实际上若是时间容许的话仍是用主流的规范来约束本身不让本身的代码变成别人口中的屎山。
若是您以为这篇文章有帮助到您的的话不妨🍉关注+点赞+收藏+评论+转发🍉支持一下哟~~😛

参考👈

如何看待 CSS 中 BEM 的命名方式？程序员

GET BEMgithub

往期精彩🌅

如何优雅的使用Vuepress编写组件示例（上）👈markdown

如何优雅的使用Vuepress编写组件示例（下）👈框架

手牵手🧑‍🤝‍🧑学习Gulp不用愁less

为了方便，我改了别人的轮子😅编辑器