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

二、如何使用BEM命名法

1.什么时候应该用BEM格式

使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。并不是每个地方都应该使用BEM命名方式。当需要明确关联性的模块关系时，应当使用BEM格式。比如只是一条公共的单独的样式，就没有使用BEM格式的意义：

.hide{display:none!important;}

2.在CSS预处理器中使用BEM格式

BEM的一个槽点是，命名方式长而难看，书写不雅。相比BEM格式带来的便利来说，我们应客观看待。而且，一般来说会使用通过LESS/SASS等预处理器语言来编写CSS，利用其语言特性书写起来要简单很多。

以LESS为例：

.article{

max-width:1200px;

&__body{

padding:20px;

}

&__button{

padding:5px8px;

&--primary{background:blue;}

&--success{background:green;}

}

}

3在流行框架的组件中使用BEM格式

在当前流行的Vue.js/React/`Angular等前端框架中，都有CSS组件级作用域的编译实现，其基本原理均为利用CSS属性选择器特性，为不同的组件生成不同的属性选择器。

当你选择了这种局部作用域的写法时，在较小的组件中，BEM格式可能显得没那么重要。但对于公共的、全局性的模块样式定义，还是推荐使用BEM格式。

另外，对于对外发布的公共组件来说，一般为了风格的可定制性，都不会使用这种局部作用域方式来定义组件样式。此时使用BEM格式也会大显其彩。

4避免.block__el1__el2的格式

在深层次嵌套的DOM

结构下，应避免过长的样式名称定义。

层级最后不要超过4级，不然增加阅读的理解难度

三、总结

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

推荐写法和风格

//常规写法：

.xxx{}

.xxx__item{}

.xxx__item_current{}

//嵌套写法

.xxx__item_current.mod-xxx__link{}

推荐：

.xxx{}

.xxx__item{}

.xxx__item_hightlight{}

.xxx__product-name{}

.xxx__link{}

.xxx__ming-zi-ke-yi-hen-chang{}

//嵌套写法

.xxx__item_current{

.xxx__link{}

}

//对应的HTML结构如下：

第一项

我是名称

看类名

我是link

第二项且当前选择项

我是名称

我是link

第三项且特殊高亮

我是名称

我是link

感谢各位的阅读，以上就是“CSS中BEM命名规范实例分析”的内容了，经过本文的学习后，相信大家对CSS中BEM命名规范实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流