BEM小结

    所谓BEM，其实是三个单词的缩写：Block（模块）、Element（元素）、Modifier（修饰符）。

1.Block（模块）

    一个模块是一个独立的实体部分，就像应用的一块“积木”。一个模块既可以是简单的也可以是复合的（包含其他模块）。比如搜索框和按钮组成的组件就是一个模块。

    命名规范：模块名称可以由拉丁字母，数字和短划线组成。 如：.block、.form

    eg：.xxoo，也就是用两个词组成的词组来描述这个块，比如.propertyeditor或.languageswitcher，前者意思是属性编辑器，后者是语言切换器。强行用一个词来描述的话，你会发现词根本不够用。

    注：B和M可以直接连用，跳过E，这是允许的。

2.Element（元素）

    一个元素是块的一部分，具有某种功能。元素是依赖上下文的：它们只有处于他们应该属于的块的上下文中时才是有意义的。比如，.form的input元素和button元素都是元素。

    命名规范：元素名称可以包含拉丁字母，数字，破折号和下划线。 CSS类名写成块名称加破折号加上元素名称：.block-elem，其中elem可以是直接元素标签名，也是表义的名称。

    eg：比如对话框内有一个确定按钮，这个确定按钮的类名可以是：.alert-modal__button--done，其中done是修饰符（ 注：修饰符在下面讲），表示是“表确定的那个按钮”。

3.Modifier（修饰符）

    修饰符是块或元素上的标志。这些标志用来形容元素或块的外观、行为或状态。例如button、a标签上的active状态。示例：.form__submit--disabled

    命名规范：修饰符名称可以包含拉丁字母，数字，破折号和下划线。 CSS类名写成模块或元素的名称加上两个破折号：.block--mod或.block__elem--mod和.block--color-black。

  eg：比如对话框内有一个确定按钮，这个确定按钮的类名可以是：.alertmodal__button--done，其中done是修饰符，表示是“表确定的那个按钮”。

小结：

    从上面的实例中，我们不难发现BEM有以下特点：

        ①复杂的类名极大减少了类名重复的可能性。

        ②每个块里的一类元素的样式对应一个类名。如此，一类元素对应一个类名，减少了子选择器或后代选择器的使用，提升了css的性能。

        ③css类名的命名更加语义化，更容易读懂。

        ④可复用性高，例如我们可以把主题类名.form__theme--xmas替换，即可对应替换为别的主题样式。

    提后话：BEM的精华是B、E、M，中间用几个连接符都是小事，一般单个中划线就可以了，但是，最常见的连接符是bb__ee--mm的形式，尽量遵守这种形式，当你遇到其他人写的规范的css文档的时候，可以降低阅读难度。

 

    同步博客园地址：https://www.cnblogs.com/MaxQD/articles/10488317.html

    同步简书地址：https://www.jianshu.com/p/ff985cfcd5de