前端框架之React-----CSS Module

在react开发中会遇到一系列css的相关问题：

1.全局污染：css使用全局选择器的机制来设置样式，样式可能被错误覆盖

2.命名混乱：为了避免全局污染，为了避免样式冲突，容易使命名混乱

3.依赖管理不彻底：组件应该相互独立，引入一个组件应该只引入它所需要的css

4.无法共享变量：复杂组件要使用JavaScript和css共同来处理样式，就会造成有些变量冗余，而预编译语言不能提供跨JavaScript和css共享变量的能力

5.代码压缩不彻底

所以使用css module来解决这些问题。

CSS Modules:

1.启用css modules：

2.样式默认局部：

使用了css Module后就相当于给每个class名外加了：local，以此来实现样式的局部化，如果我们想切换到全局模式，可以使用：global包裹。

3.使用composes来组合样式：

4.class命名技巧：遵从BEM规范：

Block  ：对应模块名

Element :对应模块中的节点名

Modifier： 对应节点相关的状态

1. .site-search{} /* 块 */  
2. .site-search__field{} /* 元素 */  
3. .site-search--full{} /* 修饰符 */ 

5.实现css和JavaScript变量共享：