CSS中什么是BEM 命名规范？

1、css中什么是bem 命名规范？一什么是bem命名规范 bem是块（block）、元素（element）、修饰符（modifier）的简写，由yandex团队提出的一种前端css命名办法论。 -中划线：仅作为连字符用法，表示某个块或者某个子元素的多单词之间的衔接记号。 _双下划线：双下划线用来衔接块和块的子元素 _单下划线：单下划线用来描述一个块或者块的子元素的一种状态 bem是一个容易又十分实用的命名商定。让你的前端代码更简单阅读和理解，更简单配合，更简单控制，越发茁壮和明确，而且越发严密。 1.bem命名模式 bem命名商定的模式是： .block .block_element .bloc

2、k-modifier 每一个块(block)名应当有一个命名空间（前缀） block代表了更高级别的抽象或组件。 block_element代表.block的后代，用于形成一个完整的.block的整体。 block-modifier代表.block的不同状态或不同版本 用法两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定。如： .sub-block_element .sub-block-modifier 2.bem命名法的益处 bem的关键是，可以获得更多的描述和越发清楚的结构，从其名字可以知道某个标志的含义。于是，通过查看html代码中的class属性，就能知道元素之间

3、的关联。 常规的命名法示例： 这种写法从dom结构和类命名上可以了解每个元素的意义，但无法明确其真切的层级关系。在css定义时，也必需依赖层级挑选器来限定约束作用域，以避开跨组件的样式污染。 用法了bem命名办法的示例： 通过bem命名方式，模块层级关系容易清楚，而且css书写上也不必作过多的层级挑选。 二、如何用法bem命名法 1.什么时候应当用bem格式 用法bem的诀窍是，你要知道什么时候哪些东西是应当写成bem格式的。并不是每个地方都应当用法bem命名方式。当需要明确关联性的模块关系时，应该用法bem格式。比如只是一条公共的单独的样式，就没有用法bem格式的意义： .hidedispl

4、ay:none!important; 2.在css预处理器中用法bem格式 bem的一个槽点是，命名方式长而难看，书写不雅。相比bem格式带来的方便来说，我们应客观察待。而且，普通来说会用法通过less/sass等预处理器语言来编写css，利用其语言特性书写起来要容易无数。 以less为例： .article max-width:1200px; &_body padding:20px; &_button padding:5px8px; &-primarybackground:blue; &-successbackground:gr

5、een; 3在流行框架的组件中用法bem格式 在当前流行的vue.js/react/angular等前端框架中，都有css组件级作用域的编译实现，其基本原理均为利用css属性挑选器特性，为不同的组件生成不同的属性挑选器。 当你挑选了这种局部作用域的写法时，在较小的组件中，bem格式可能显得没那么重要。但对于公共的、全局性的模块样式定义，还是推举用法bem格式。 另外，对于对外发布的公共组件来说，普通为了风格的可定制性，都不会用法这种局部作用域方式来定义组件样式。此时用法bem格式也会大显其彩。 4避开.block_el1_el2的格式 在深层次嵌套的dom 结构下，应避开过长的样式名称定义。

6、层级最后不要超过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 /