企业开发CSS命名BEM代码规范实践

背景

最近老大在维护别人的代码时，发现我们团队写的样式各有种的想法及风格，这在我的好老师作文后续维护会增加一定的难度，所以老大决定统一样式的会名规范，所以就安排我去调研及实践，下面是我调研的结果。

什么是 bem 命名规范

bem 由 yandex 团队提出的一种前端 css 命名方法论。bem 是blockelementmodifier的缩写 ，其中b表示块（block）、e表示元素（element）、m表示修饰符（modifier）。

这三个部分通常使用__与--连接。即：.块__元素–修饰符{}

block：代表了一个独立的块级元素，可以理解为功能组件块。一个 block 就是一个独立的区块，比如头部是个 block,表单功能输入框是一个block，block可大可小。element：是 block 的一部分不能独立来使用的，所有的 element 都是与 block 紧密关联的。例如一个带有icon的输入框，那么 这个icon就是这个输入框 block 的一个 element，脱离了输入框的 block 那么这个 icon 就没有意义。modifier：是用来修饰 block 或 element，表示 block 或者 element 在外观或行为上的改变。例如，上面提到的输入框 block，当鼠标悬停时边框高亮，那么这个高亮的效果就应该用 modifier 来实现。

上图绿色表block， 蓝色表示element， 红色表示modifier。

为什么要用 bem?

性能

css 引擎查找样式表，对每条规则都按从右到左的顺序去匹配，以下这段代码看起来很快，实际上很慢。通常我们会认为浏览器是这样工作的：找到唯一id元素ul-id—> 把样式应用到li元素上。

事实上: 从右到左进行匹配，遍历页面上每个li元素并确定其父元素

#ul-id li {}

所以不要让你的css超过三层。

语义化

bem 的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。 通过浏览html代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。

常规的命名法示例：

 <div class="article">    <div class="body">        <button class="button-primary"></button>        <button class="button-success"></button>    </div></div>

这种写法从 dom 结构和类命名上可以了解每个元素的意义，但无法明确其真实的层级关系。在 css 定义时，也必须依靠层级选择器来限定约束作用域，以避免跨组件的样式污染。

使用了 bem 命名方法的示例：

<div class="article">    <div class="article__body">        <div class="tag"></div>        <button class="article__button--primary"></button>        <button class="article__button--success"></button>    </div></div>

通过 bem 命名方式，模块层级关系简单清晰，而且 css 书写上也不必作过多的层级选择。

怎么用 ？

假设我们要实现这样的一个卡片功能：

根据上面的设计图，我们用 bem 方式来给对应class命名，如下所示：

<div class="card">    <img class="card__img" src="./img.jpg" alt="">    <div class="card__content">        <ul class九八五大学名单排名="card__list">            <li class="card__item card__item--active">手机</li>            <li class="card__item">移动市场</li>            <li class="card__item">科技</li>        </ul>        <p class="card__desc">商化前端是一个很有活力的团队，能学到很多知识，你心动了吗？</p>        <a class="card__link" href="#">详细内容</a>    </div></div>

对应的 css 结构：

.card{  // 省略...}.card__img{  // 省略...}.card__content {  // 省略...}.card__list{  // 省略...}.card__item {  // 省略...}.card__item--active {  // 省略...}.card__link{  // 省略...}.card__link:hover{  // 省略...}

从上面的代码可以看出，我们样式类没有一点嵌套关系，嵌套关系都以从命名的方式来代替。

这里刚开始使用 bem 的时候容易犯一个问题，就是把ul和li的样式写成card__content__list和card__content__list__item因为这样更能体现层级的关系。

这有悖bem命名规范，bem的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。这样的约定可以防止当层级很深命名过长的问题。

上面我们每个样式都要写一遍card，如果 card 换成一个比较长的单词，这样也太冗长了，这也是大家不太喜欢 bem 的一个原因，但这个sass或less是很好的解决的，我们可以用&表示根元素，上面在 less 或 sass 中可以改成如下结构：

.card{  // 省略...  &__img{  // 省略...  }  &__content {  // 省略...  }  &__list{  // 省略...  }  &__item {  // 省略...  }  &__item--active {  // 省略...  }  &__link{  // 省略...  }  &__link:hover{  // 省略...  }}

插件的使用

和eslint校验类似，stylelint也有一个配置文件.stylelintrc.js(还有其他格式的，这里以js文件为例)。

module.exports = {};

为了让小伙伴编写符合 bem 的规范，这里我们使用 stylelint-lector-bem-pattern 插件，它结合了插件 postcss-bem-linter 的规则，可用于校验 bem 命名规范。

module.exports = {  plugins: [    'stylelint-lector-bem-pattern'  ],  "rules": {       'plugin/lector-bem-pattern': {          // 选择pret patterns，支持suit和bem两种，默认suit规范；          // 不管哪种都需要手动指定，因为该插件未给源插件默认指定          'pret': 'bem',          /**           * 自定义模式规则           * 指定组合的选择器检查规则，其实就是指定class名称规则           * 支持正则字符串、返回正则的函数、包含2个选项参数的对象等写法           */          componentlectors: {            // 只初始的选择器规则（可以理解为外层的c吻合造句lass规则）            initial: '^\\.{componentname}(?:__[-a-z]+)?(?:--[a-z]+)?$',            // 可以理解为外层以内的选择器的规则，            // 如果不指定，则跟initial同样的规则，            // 注意这里配置的时候比上面少一个问号，            // 是希望内层就不应该只有componentname作为选择器了            combined: '^\\.{componentname}(?:__[-a-z]+)(?:--[a-z]+)?$'          },          "utilitylectors": "^\\.u-[a-z]+$",          ignorelectors: ['^\\.el-', '/deep/', '>>>', '^\\.icon-'],          ignorecustomproperties: [],        }   }}

配置完成后，为了能让 vscode 给出错误提示，我们需要在 vscode 中添加stylelint插件。

最后， 就是git commit校验

// package.json{    "husky": {        "hooks": {          "pre-commit": "lint-staged"        }    },   "lint-staged": {    "*.{vue,ts,tsx,js,jsx}": "eslint --fix",    "*.{vue,css,less,sass,scss}": "stylelint --fix"  },}

这里涉及到husky的使用，如果不懂的，可以自行谷歌了解理详细的信息。

实战

配置完成后，我们就需要动手验证一下了

首先，我们需要定义一个上下文，这样插件才知道对 css 进行校验。

比如我们有如下的html结构：

<div class="form form--theme-xmas">  <input class="form__input" />  <input class="form__submit form__submit--disabled" type="submit" /></form>

对应的css要这样写:

/** @define formwrapper */.formwrapper{  padding: 0 20px;  box-sizing: border-box;}.formwrapper--line{  display: none;}.formwrapper__form-item{  display: flex;  align-items: center;  margin-bottom: 20px;}

这里@define formwrapper声明了一个 blockformwrapper， 表示样式必须是formwrapper开头，否则报错。

如果有多个 block，我们只要多个@define声明即可。

/** @de莲藕排骨汤怎么做fine foo */.foo {}/** @define bar */.bar {}

如果一个类不属于任何的 block，我们又要怎么做，才不会导致 styleint 报错呢？这里我们可以加/** @end */表示 block 的结束。

/** @define form */.form{  display: flex;}.form--theme-blue{  text-align: center;}/** @end */ .isacti汽车销售技巧ve{  display: flex;}

如果我们想忽略对某块样式进行校验，可以使用下面的语法来忽略：

/** @define mycomponent */.mycomponent {  display: flex;}/* postcss-bem-linter: ignore */.no-flexbox .component {  display: block;}

总结

bem 最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用或不使用它。随着不断使用的经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。技术无好坏，合适方最好。

以上就是企业开发css命名bem代码规范实践的详细内容，更多关于css命名bem代码规范的资料请关注www.887551.com其它相关文章！