CSS命名规范-BEM思想

本文章参考链接：https://blog.csdn.net/qq_27263045/article/details/79529371

1、首先CSS样式规范性，是大多数实际项目中所必须要求的。很大程度上避免后期代码的重构。

2、实际开发中，采用了各种方法来达到CSS样式规范化，但效果都不明显：

a：驼峰命名；

b：采用模块为前缀达到区分其他模，避免重复的效果【例：scoped属性】；

3、现在，我们来介绍一下BEM的CSS命名规范：

BEM的意思就是块(block)、元素(element)、修饰符(modifier)。

是由Yandex团队提出的一种前端命名方法落论。该命名方法使代码更具可读性和维护性，同时也让CSS类更具有意义。

.block {}                        //代表更高级别的抽象或组件；

.block__element {}         //代表.block的后代，用于形成一个完整的.block整体；

.block--modifier {}        //代表.block不同状态或不同版本；

之所以使用两个两字符和下划线而不是一个，是为了让你自己的块可以单个连字符来界定，例如：

.div-query {}                //块

.div-query__button {}    //元素

.div-query--valid {}        //修饰符

BEM最突出的作用是显示的告诉其他开发者某个标记是用来干什么的。通过浏览器HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者元素，还有一些是组件其他形态或者是修饰符：

.dog {}

.dog__tail {}

.dog--big {}

.dog__tail--long {}

.dog--big__eyes {}

顶级块“dog”，拥有一些其他元素。例如："tail"。而“dog”也有一些修饰符，如：“big”，同时块“dog”下的元素也有修饰符，如“long”。