Css—BEM命名规范

这是一个另很多程序猿感到即头疼又不得不决定做的事情（反正我是这样的，刚开始被折磨了很久才慢慢习惯过来），后来才发现它真的有作用，至少在你的代码规范上增添了不少的乐趣和成就感！！！

BEM

是Block（块）、Element（元素）、Modifier（修饰符）的简写，是一种组件化的 CSS 命名方法和规范，使用BEM主要是为了将用户界面划分成多个独立的block,这使得界面开发变得简单而快速，即使是复杂的用户界面，也可以重复使用现有的代码，有利于团队协作，方便维护。

BEM命名规范

(Block)块名称和块名称之间用 - 分割。（以微信小程序为例、使用Scss预处理器)

块与元素之间用双下划线__分隔。每个页面都是以第一个元素默认为块元素，块下面的元素为嵌套元素，可以平级嵌套多个元素。

有同学会问？嵌套的元素内还可以再嵌套元素吗？

答案是可以，但不推荐。原因是从最上面图片看，最外层的块元素到嵌套的元素，已经属于5层了，再往下写的话看着就显得元素太多，嵌套层级太深，后期不好维护，建议最多嵌套3层。                                                                                                                    

Modifier

定义Block和Element外观、状态、行为的一段代码描述。块名称与修饰符或元素与修饰符之间用双连字符--分隔。使用场景多用于三元表达式。

以上就是BEM的基本简单规范事例，目的是为了养成在平常写代码规范。从点滴做起，自然成习惯，逐步往大佬方向发展靠拢😎