CSS模块化(CSS预处理器、CSS Module)

CSS预处理器

我们知道，CSS入门简单但是却有许多弊端。例如：

1、语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

2、没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；

这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员需要使用一种称之为 【CSS 预处理器】 的工具。CSS预处理器就是一种可以将你根据它的规则写出来的格式转成css的东西，CSS预处理器主要有以下功能：

1、文件切分：把一个大的 CSS 文件在切分成多个小文件，实现初步模块化

2、选择符嵌套：避免了书写大量重复选择器，减少代码冗余

3、设置变量：实现样式复用，使代码变得易维护

4、可使用运算、函数等

几种主流CSS预处理器分别是Less、Sass和Stylus。

Sass：2007年出现，有两种语法，分别以 .sass 和 .scss 为扩展名。基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 Less。

Less：2009年出现，受Sass影响大，以 .less 为扩展名。基于 NodeJS，通过客户端处理，使用简单。功能比 SASS 简单，解析效率也低于 SASS，但在实际开发中足够了。

Stylus：2010年出现，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，以 .styl 为扩展名，使用不如Sass和Less广泛。

CSS Module

我们知道组件应该相互独立，引入一个组件时，应该只引入它所需要的 CSS 样式。由于Saas/Less很难实现对每个组件都编译出单独的 CSS，所以实现模块化只有【CSS预处理器】是远远不够的，还有很多问题没得到解决，如下：

1、全局污染、命名混乱。

2、依赖管理不彻底。

3、无法共享变量。

4、代码压缩不彻底。

这时就需要 CSS Modules来解决，它使用JS编译CSS文件，使其具备模块化的能力。

CSS Modules不是将CSS改造的具有编程能力，而是加入了局部作用域、依赖管理，这恰恰解决了最大的痛点。可以有效避免全局污染和样式冲突，能最大化地结合现有 CSS 生态和 JS 模块化能力。

CSS Modules的配置也非常简单，下面以webpack+react为例介绍一下：

因为webpack 自带的 css-loader 组件，自带了 CSS Modules，所以在webpack配置文件（webpack.config.js）中加上【module: true 即可

在模块中使用时我们只需要修改一下css文件的引用方式即可

渲染结果为：

说明：

CSS Module还是JS和CSS分离的写法，不会改变大家的书写习惯，CSS Module只需修改构建代码和使用模块依赖引入className的方式即可使用，且支持less和sass的语法。

拓展（babel-plugin-react-css-modules）：

babel-plugin-react-css-modules 可以实现使用styleName属性自动加载CSS模块。只需要把className换成styleName即可获得CSS局部作用域的能力