css、sass、less| module 样式模块化

话不多说，以sass为例，咱们先来看看区别

首先，目录结构如下

一、正常书写

这里就称为三部曲吧，
1、写页面（不用多说，相信大家都会了）；
2、写正常样式（相信大家也会了）
3、导入样式

1、全局

login中

import './login.scss';//导入样式

<div className="wrap">
    <div className="title">登录页</div>
    <div className="content">global</div>
</div>

.wrap{
    color: red;//这里是登录页写的样式
}

home中

import './home.scss';//导入样式

<div className="wrap">
    <div className="title">这是首页</div>
    <div className="content">global</div>
</div>

效果


这里我们注意到，我只给login加了字体颜色的样式，但是home中字体颜色也变了，这说明：常规写法中（即后缀为.scss），className="wrap"是应用于全局的，也就是说，在这个项目中，不管在哪个页面，只要类名为wrap，字体颜色都会变成红色

不信？咱们来测测
有人就想说，我想让login页的字体为红色，home页的字体为金色，那我给home页设个金色不就行了，我们来看看

import './home.scss';//导入样式

<div className="wrap">
    <div className="title">这是首页</div>
    <div className="content">global</div>
</div>

.wrap{
    color: gold;
}

效果

呀，一看，home页果然变成了金色，开心得不行，先等等，我们再来看一下login页，

哟，不行，login页也变成了金色，百思不得其解啊，为什么呢？接下来我们看看原因：

控制台看了一下，首先，我们是给login页加了红色，但是，在给home页加了金色时，把原来得红色覆盖掉了，这就很好的说明了常规写法下，className="wrap"这样写样式作用于全局，全局得意思呢就是：该项目里，只要类名为wrap的样式公用。

回到上面的问题，怎么做才能让login页红色，home页金色呢？
有人说，你起两个不同的类名不就可以了吗？好的，咱们来看看，把home页类名改成wraphome

import './home.scss';//导入样式

<div className="wraphome">
   <div className="title">这是首页</div>
   <div className="content">global</div>
</div>

.wrap{
    color: gold;
}

效果


确实已经达到了想要的样子，但是如果项目比较大，页面复杂时，咱们是不可能保证写出来的类名完全不一样的（这里有人会质疑脸，毕竟小编本人在最初学习时就是这种想法，现在想想还是太年轻啊），比如title，很多页面都会用到，还要一边写一边记这个类名我有没有写过真的是太烧脑细胞啦

2、局部（有效）

其实，大家的想法就是，我只想让login.scss的样式应用于login页面，home.scss的样式应用于home页面，那怎么去解决这个问题呢？
好了，这里最开始有一个方法，小编当初就是这么写的，还自认为没啥问题，（当项目再大到一定程度时，好像又出问题了）不管，咱先来看看
首先，每个页面最外面一个div的类名，就以页面名来命名，页面其他内容都在这个div的内部，写样式时也一样，最外面先裹一层该页面最外层的类名，其他样式写在该类名内部，如下：
home页


login页


效果


喏，各样式就互不干扰啦，而且一个页面中控制类名不重复就比刚刚容易多了；
这种方法只要保证每个页面最外层的div类名不重复就可以了！

但是随着项目的增大，将会带来新的问题，比如一个项目几百个页面，控制类名不重复就会又麻烦起来，有什么方法能够方便快速的解决这个问题呢？

这里我们引入模块化的概念

二、module模块化

概念这里不再赘述，很多博客都有讲到（小编自己上来就看概念是真的没能理解，不知道大家感觉怎么样）

1、模块化的基本使用

！！！！样式命名必须要是xxx.module.scss才能被引用
login页

//sass中的模块化--样式命名必须要是xxx.module.scss才能被引用
import Modules from './login.module.scss';

<div className={Modules.wrap}>
    <div className="title">登录页</div>
    <div className="content">global</div>
</div>

.wrap{
    color: red;
}

home页

import Modules from './home.module.scss';

<div className={Modules.wrap}>
    <div className="title">这是首页</div>
    <div className="content">global</div>
</div>

.wrap{
    color: cyan;
}

效果


诺，随心所欲，个页面样式互不干扰啦，而且注意到，我们每个页面最外层的div类名都一样，只是引入不同的样式表就可以啦（其实这个说法不正确的，构建工具会将类名style.title编译成一个哈希字符串，类名其实不一样的，可以打印出来看看）
这是home页实际的类名

这是login页实际的类名

2、引入global

你不是说随心所欲嘛，我怎么给title加样式他不奏效呢？
效果

我们来看看怎么加的

import Modules from './login.module.scss';

<div className={Modules.wrap}>
    <div className="title">登录页</div>
    <div className="content">global</div>
</div>

.wrap{
   .title{
       color: lawngreen;
   }
}

这个问题其实还是概念问题啦，看到这里，再去研究概念应该就比较舒服了。

！！！简而言之一句话，只要写成className="title"这样的，都是使用全局样式，写成className={xxx.title}才是模块样式。

1、有效写法（模块化）

出现上面现象的原因呢就是，你最外层已经wrap设定为模块样式（局部样式了）,那他内部的类名肯定都是模块样式了，所以，应该写成className={Module.title},
如下


这样才会奏效，
看下效果

这样写多麻烦啊，你想啊，每个类名都得给他加上{Module.xxx}太累了，因此，我们引出了global这个概念（大家去百度吧或者看其他博客，顺便把local也看一下，方便大家深入理解，我们这里就只告诉大家怎么用的了）

2、最佳写法（global全局化）

OK！这样写就搞定啦 不放心？看下效果

没骗你吧，嘿嘿

好了，到这里呢，相信大家应该能够体会其中的区别啦，css与css.module呢看阮一峰老师的[CSS Modules 用法教程]就可以啦(http://www.ruanyifeng.com/blog/2016/06/css_modules.html)，以上就是小编学习和踩坑的总结，如果大家发现不对的地方，欢迎指正，跟大家一起学习呀