css样式命名规范：BEM命名规范

前言：

在小型项目中，css样式命名只要遵循基本规则，即可灵活合理运用。但在中大型项目中，如果没有统一的命名规范和代码风格，页面一多，将会很难维护和理解，甚至出现重复命名导致样式覆盖、代码污染的问题。为此，基于bem命名规范，提供了这样一套css命名规则。

说明：

bem命名规范掘金原地址：https://juejin.im/post/5b925e616fb9a05cdd2ce70d

要点：

1、尽可能在页面中使用 scoped 方式，避免各组件样式污染

2、组件内的样式，尽可能将所有样式包裹在一个组件名命名的class内

3、覆盖element样式，在scoped方式下，使用/deep/，特殊需求注明备注

4、自己原本的高级别的块命名，还是用单个中划线连接pc-preview，pc-contnet-title

5、它的后代，用__两个下划线表示一个整体 pc-preview__content，但避免过长的层级嵌套

6、某一个块的不同状态，用两个连字符，如pc-preview--hide pc-preview--show

7、并不是每个地方都应该使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。

重点：

Bem 是块（block）、元素（element）、修饰符（modifier）的简写，由 Yandex 团队提出的一种前端 CSS 命名方法论

1、- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。

2、__ 双下划线：双下划线用来连接块和块的子元素

3、_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

4、-- 两个连字符：某一个块的不同状态，用两个连字符，如pc-preview--hide pc-preview--show

示例：

 

 

 

嵌套中的命名