Css Modules 小试

定义

一个css模块即一个定义好了所有样式(类)和动画名称的本地css文件

官方推荐仅使用类来定义样式

CSS Modules 会编译成一种低层级的ICSS,但它的格式与正常css格式相似

1
2
3
4
/* style.css */
.className {
color: green;
}

当使用js模块导入css模块时,它输出一个属性与本地样式名称相对应的对象

1
2
3
import styles from './style.css';

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

命名


对于本地类名建议使用驼峰命名,但并非强制

关于使用驼峰命名的方式主要是为了更好在js中导入并使用css模块

可以为css-loader增加camelCase参数来实现自动转换

1
2
3
4
{
test: /\.css$/,
loader: 'style!css?modules&camelCase',
}

作用域

:global: 切换到当前选择器所在全局作用域下
:local: 切换到局部作用域下

如果切换到全局模式下,定义的样式将允许在全局作用域中使用

Example:

1
.localA :global .global-b .global-c :local(.localD.localE) .global-d

组合

用于组合其它选择器

1
2
3
4
5
6
7
8
9
.className {
color: green;
background: red;
}

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

允许拥有多个组成规则,但组成规则必须先于其它规则。当一个类composes另外一个类时,css模块对外的接口为当前类名,允许添加多个类名。

组成规则允许使用多个类:composes: classNameA classNameB

依赖

允许compose其它CSS Modules的类名

1
2
3
.otherClassName {
composes: className from './style.css';
}

注意:

  1. 当从不同的文件composes多个类时,compose的顺序是不确定的,因此,需要确保composes的类没有定义相同的属性值
  2. compose不应该循环嵌套,因为Elsewise是无法确定这是组成规则还是属性,模块系统将会发出一个错误。
  3. 最好的方式就是基本类与依赖分离

为什么使用CSS Modules

模块化和可重复使用的css

  • 解决命名冲突
  • 显式依赖
  • 没有全局作用域

编译结果

默认为哈希字符串
image

允许自定义配置
image

感谢您的阅读,本文由 MINFIVE 版权所有。如若转载,请注明出处:MINFIVE(http://blog.minfive.com/2017/10/04/2017-10-04-css-module/
Postcss 小试
使用 Git Rebase 美化 Git Commit 流程