CSS模块化命名

1.BEM的CSS selector命名规则

说起来就一句&＃xff0c;就是在class中加入组件的前缀

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

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

3.CSS模块

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

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

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

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

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