css模块化

1.预热

(1)css模块化：CSS文件中所有的类名 和 动画animation名都是默认本地全局。

对于所有的url(…)和@imports都是格式化请求加载模块.（/xxx或../xxx属于相对路径，xxx和xxx/yyy用来加载node_modules中模块文件）

备注：CSS模块编译为一种称为ICSS或Interoperable CSS的低级交换格式，但编写方式与普通CSS文件类似。

/* style.css */
.className {
  color: green;
}

从JS模块导入CSS模块时，它会导出一个对象，其中包含从本地名称到全局名称的所有映射。这也就是dva中先引入style文件再通过{style.className}引用的原因。

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

2.命名规范

推荐本地类名使用小驼峰camelCase，但不强制。

原因：建议小驼峰，因为在尝试以点符号形式访问style.class-name时，常见的替代方法是kebab-casing可能会导致意外行为。 您仍然可以使用括号表示法处理kebab-case（例如style [‘class-name’]），但style.className更清晰。

3.辅助

:global 全局切换到当前选择器各自标识符的全局范围。如：.localA :global

:global(xxx) 在全局范围内的括号中声明内容，如.global-c :local(.localD.localE)

4.组成

选择器组成/嵌套：

.box {
  color: green;
  background: red;
}

.otherClassName {
  composes: box;
  color: yellow;
}

(1)compose规则必须先于其他规则；

compose仅适用于本地选择器，并且要求选择器都是单个类名；

当使用compose嵌套式，css模块会导出嵌套内外的两个类名。

使用compose可以添加多个类名。如上：.box .otherClassName

5.依赖

（1）CSS modules可以加载其他文件作为类名。

.otherClassName {
  composes: className from "./style.css";
}

composes: bounce from "shared/styles/animations.css";

请注意，在从不同文件组合多个类时，应用的顺序是未定义的。

在单个类中组合时，请确保不要为来自不同文件的多个类名中的同一属性定义不同的值。

最好的类只做一件事，依赖是分层的。

组成全局类名：

.otherClassName {
  composes: globalClassName from global;
}

6.使用预处理器

预处理器可以更好得定义全局范围或本地范围。

如：下面less

:global {
  .global-class-name {
    color: green;
  }
}

7.实现—通过webpack

webpack模块中css-loader：根据模块名和本地/全局作用于进行对应替换。并导出相应标识符。

Extending将原类名代码添加到导出。

Extending先导入别的模块，再将类名导出。

总结：

使用css模块化的理由如下：

不再有冲突

显示依赖

没有全局作用域

参考：https://github.com/css-modules/css-modules

如有错误，请指正~