理解BEM的命名方式

     最近公司将要着手开始封装自己的组件库了，所以有必要学习一些新的知识。

     什么是BEM呢？其实它就是css类的一种命名方式，由Yandex团队提出的，不过也有一些大牛们不喜欢这种命名方式，认为他过于复杂，冗余，降低了编码效率，不过基于存在即合理，我们还是有必要了解一下他的命名规则。

    首先来理解一下什么是B：即block，这个block不是css中样式的block，而是模块的意思，将所有的样式类分成一些模块，有点类似于语义化的html，比如将样式列分为header，section，footer等。

    E:Element，元素，比如说这个组件是按钮，即可将元素名起为btn，BEM的命名中只包含三个部分，元素名只占其中一部分，所以不能出现多个元素名的情况。

    M:modefiy，修饰器名。在编写前端页面代码的时候我们经常会遇到以下的状态：比如写一个下拉菜单，我们通常会编一个.active用来表示当前点击的项，那么，在BEM中，这个就可以放在modefiy中。

    总结的来说，BEM的命名规则就是：block-name_element-name--modefiy-name。

    一般来说，我们习惯用组件名来命名模块名，使用单下划线或者双下线来区分组件名和元素名，使用双中划线来区分元素名和修饰器名。

    当你真正上手写项目的时候，可能会认为这种方式过于繁琐，经常会在一个元素上应用大量的类，其实，我们可以应用它的思想，但是不一定应用他的方式，我认为使用BEM的方式可以让代买在后期变得更好维护。