前端BEM浅析

前端BEM是一种CSS规范，可以让开发更有效率，通过这种见名知意的CSS命名，可以让前端开发中CSS复用性更高，团队开发也能相互配合，减少不必要的CSS冗余。

B：Block 块级元素。HTML中有意义的元素名。如 .nav

E:Element 元素，存放在Block里面的元素，作为Block的补充，脱离Block将无意义。通常用__连接，如.nav__name

M:Modifier 变化动作。赋予块级元素或者子元素变化属性。通常用--连接如.nav__name--highlight，复杂一点的可以再用-连接如.nav__name--color-red

定义CSS的时候选择器就是本身的Class，不需要层级

使用CSS的时候，Block和Element的CSS是元素，可以直接使用一个Class。而使用Modifier变化动作CSS的时候需要配合前面2个元素，就是再Block或者Element的Class后面跟上Modifier的Class

像Bootstrap、ElementUI这些比较常用的前端框架也都是使用这种方式来命名CSS，所以是比较通用和流行的。

官方地址：BEM官网

通过查看官网会更深入的了解这种比较好的CSS最佳实践方式。