CSS Modules ​

CSS模块是一个约定而成的规范，开发者围绕这个规范实现相应的工具。

定义 ​

一个CSS模块是一个css文件

• 文件内的类名、动画名默认限制在文件内，不会造成全局污染
• 文件内的url，按照./xxx表示相对路径，xxx/yyy表示node_modules下的模块路径

用法 ​

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

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

实现在JS中导入CSS的这套规范称为ICSS，用于指导相关工具的开发实现。

命名 ​

css class 推荐小驼峰式命名，如.className，以便在JS中书写

例外 ​

在CSS模块中，使用:global(.xxx)退出到全局作用域，使用:local(.xxx)在:global内回到本地作用域

组合 ​

.classNameA {
  color: green;
}
.classNameB {
  color: green;
}
.otherClassName {
  composes: classNameA classNameB;
  color: yellow;
}

依赖 ​

.otherClassNameA {
  composes: className from "./style.css";
}
.otherClassNameB {
  composes: globalClassName from global;
}

作用 ​

模块化的，便于重用的CSS

• 不再冲突
• 明确的依赖
• 不再全局污染