CSS模块化命名

1.BEM的CSS selector命名规则

说起来就一句，就是在class中加入组件的前缀

2.suit的class selector命名规则https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md

比BEM 具体，可操作性也很强.
u-utilityName
Component
ComponentName-descendentName
ComponentName–modifierName
ComponentName.is-stateofComponent

3.CSS模块

实现了细粒度的复用样式。可以使用nodejs里面的模块来举例。我们定义了一个模块A，在B中引用A模块中的方法

//A.js
exports={add:function(){},minus:function(){}};
//B.js
var A=require('./A.js');
var add=A.add(x,y);//从这儿我们这儿可以明确的看出我们引用了A模块中的add方法。

但是在sass或者less中，我们使用在全局定义一个variables.scss,然后在需要的地方引入这个文件，最后再在文件里直接使用variables.scss中的变量，我们是无法看出我们引用的变量是来自哪一个scss文件的，大概是这个样子

//varibale.scss
$base-font-size:12px;
$base-bg-color:#333;
//base.scss
$base-font-size:15px;
//A.scss
@import "varibale.scss"
@import "base.scss"
html{
    font-size:$base-font-size;//在此我们是无法分别此处的变量是来自哪个文件，是varibale.scss还是base.scss
}

但是css模块解决了这个问题，我们可以利用compose和import来明确表明我们引用的是