Menu

  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay
  • Home
  • Work
    • Cloud
      • Virtualization
      • IaaS
      • PaaS
    • Java
    • Go
    • C
    • C++
    • JavaScript
    • PHP
    • Python
    • Architecture
    • Others
      • Assembly
      • Ruby
      • Perl
      • Lua
      • Rust
      • XML
      • Network
      • IoT
      • GIS
      • Algorithm
      • AI
      • Math
      • RE
      • Graphic
    • OS
      • Linux
      • Windows
      • Mac OS X
    • BigData
    • Database
      • MySQL
      • Oracle
    • Mobile
      • Android
      • IOS
    • Web
      • HTML
      • CSS
  • Life
    • Cooking
    • Travel
    • Gardening
  • Gallery
  • Video
  • Music
  • Essay

CSS Modules学习笔记

22
Dec
2016

CSS Modules学习笔记

By Alex
/ in CSS
/ tags 学习笔记
0 Comments
CSS Modules
简介

CSS Modules是一个开源项目,它是一个简单的CSS模块化规范,主要完成两件事情:

  1. 样式类名、动画名的作用域支持。这可以避免命名冲突
  2. 模块化支持,允许CSS文件之间的依赖关系

与Less、SASS、PostCSS不同,CM并不尝试把CSS变得像一门编程语言(比如支持控制结构、变量),它仅仅解决模块化的基本问题——作用域和模块依赖。

使用CM时所有 url(...) 和 import 所操作的URL均为模块请求格式(module request format):

  1. ./xxx和 ../xxx 这样的URL表示想对路径
  2. xxx和 xxx/yyy 这样的URL表示目标位于模块目录(例如node_modules)内部
作用域

使用CM时,样式类名、动画名默认仅具有局部作用域。CM会把CSS文件编译为一个低级别ICSS(Interoperable CSS)格式,不过你编写的时候仍然使用普通CSS语法:

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

ICSS会导出一个对象,其键是局部名称(即你在CSS中声明的样式类名),其值则是编译后的全局名称。全局名称正是运行时使用的真实CSS样式类名,默认情况下全局名称是依据局部名称生成的哈希串。

从JS模块引入一个CSS模块时,你自然获得上述导出对象,可以通过键引用CSS类名:

JavaScript
1
2
3
4
5
6
7
// 导入全部映射
import styles from "./style.css";
// 导入需要的映射
import { className } from "./style.css";
 
// 基于键引用全局样式类名
element.innerHTML = '<div class="' + styles.className + '">';
命名

CM建议局部名称一律使用驼峰式大小写,单这不是必须的。

全局作用域

使用特殊伪类 :global 可以声明一个全局作用域:

CSS
1
2
3
4
5
6
:global(.className) {
    color: green;
}
 
@keyframes :global(animeName){
}

全局名称不会被编译成哈希串,在JS中可以直接使用: 

JavaScript
1
element.innerHTML = '<div class="className">';

尽管通常情况下没有必要,你可以显式的声明局部作用域: 

CSS
1
2
3
:local(.className) {
    color: green;
}
组合

CM支持让一个选择器compose另一个选择器定义的样式规则,并称其为组合(Composition)。例如:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.className {
    color: green;
    background: red;
}
 
.otherClassName {
    composes: className;
    color: yellow;
}
 
/* 编译结果 */
.global_name_className{
   color: green;
   background: red;
}
.global_name_otherClassName{
    color: yellow;
}

引用otherClassName的JS代码,会被编译为分别引用上面两个选择器的形式:

XHTML
1
2
3
`<div class="${otherClassName}">`
<!-- 编译结果 -->
<div class="global_name_className global_name_otherClassName">

注意:

  1. 你可以在单个composes规则中指定多个目标类名,例如 composes: classNameA classNameB;
  2. 你可以指定多次composes规则,但是必须位于其它规则的前面
  3. 组合仅仅支持局部选择器,并且选择器必须是单个样式类名
依赖

使用组合时,你可以compose来自其它CSS模块的样式类:

CSS
1
2
3
4
.title {
    composes: className from './another.css';
    color: red;
}

注意: compose其它CSS文件中定义的样式类时,其应用顺序是不确定的,因此你不能假设同名规则的覆盖情况。

在Webpack中使用

CM为流行的构建工具提供了插件支持。使用Webpack时,你可以通过css-loader来支持CM。配置示例:

webpack.config.js
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Webpack 1.x配置
module.exports = {
    module: {
        loaders: [
            {
                test: /\.css$/,
                // modules参数导致css-loader工作在module模式下
                loader: "style-loader!css-loader?modules"
                // 你可以使用localIdentName参数来定制全局名生成规则,默认规则为[hash:base64]
                loader: "style-loader!css-loader?modules&localIdentName=[path][name]-[local]-[hash:base64:5]"
            },
        ]
    }
};

当工作在modules模式下时,css-loader会把所有局部样式类名编译成唯一的全局名。 

联用CSS预处理器

CM产生的ICSS文件与SASS/SCSS/LESS之类的CSS预处理器是兼容的。你可以把预处理器的loader添加到加载器链中:

JavaScript
1
2
3
4
5
6
7
8
9
10
{
    test: /\.scss$/,
    loaders: [
        // 注意链条是从右向左(从下向上)执行的
        'style',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'resolve-url',
        'sass'
    ]
} 
React CSS Modules

在开发React应用程序时,可以考虑使用PostCSS插件React CSS Modules来代替CM,其优势是:

  1. 不要求你使用驼峰式大小写的类名。使用CM时,Webpack的css-loader强制要求驼峰式大小写
  2. 不需要在代码中到处引用styles对象中的属性
  3. 全局CSS与CSS模块很容易区分:
    JavaScript
    1
    2
    // RCS使用className引用全局CSS类名,styleName引用局部CSS类名
    <div className='global-css' styleName='local-module'></div> 
  4. 如果styleName属性引用一个未定义的CSS模块,你可以得到一个警告而非错误
实现机制

RCS扩展了目标React组件的render方法,依据输出元素上的styleName属性的值来寻找styles对象中的CSS模块,然后把找到的全局样式类名附加到元素的className后面。

这意味着,组件必须要被RCS装饰。

在Webpack中使用
开发环境

在开发环境下,你可能希望启用Sourcemaps和热模块替换(Hot Module Replacement) 。加载器style-loader已经支持HMR,因此HMR是开箱即用的。

参考下面的内容配置加载器:

JavaScript
1
2
3
4
5
6
7
8
// 需要预先安装style-loader、css-loader
{
    test: /\.css$/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}
生产环境

在生产环境下,你可能希望把CSS块合并到单个文件中:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 需要预先安装style-loader、css-loader
// extract-text-webpack-plugin 用于把CSS块合并到单个文件
{
    module: {
        loaders: [
            // ExtractTextPlugin v2x
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract( {
                    notExtractLoader: 'style-loader',
                    loader: 'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]!resolve-url!postcss',
                } ),
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin( {
            filename: 'app.css',
            allChunks: true
        } )
    ]
}
联用React

要使用RCM,你的React组件必须被CSSModules装饰:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
 
// 可以使用ES7装饰器语法
@CSSModules(styles, options)
class Table extends React.Component {
    render() {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
            </div>
        </div>;
    }
}
 
// 必须装饰React组件,否则无法使用styleName属性
export default CSSModules( Table, styles, options);

其中options支持以下选项:

选项 说明
allowMultiple 默认false。是否允许多个CSS模块名,如果设置为false,以下代码会导致错误:
XHTML
1
<div styleName='foo bar' /> 
errorWhenNotFound 默认true。如果styleName指定了无法在styles对象中找到的CSS模块,是否报错
styles属性

被装饰的React组件,会获得 this.props.styles 属性,它的值与CSSModules调用的第2参数是一个对象:

JavaScript
1
2
3
4
5
<div>
   // 这两种写法等价
    <p styleName='foo'></p>
    <p className={this.props.styles.foo}></p>
</div>;
子组件

默认的,你不能在子组件中的输出元素中使用styleName属性,因为子组件没有被CSSModules装饰。你可以:

  1. 使用装饰过的子组件
  2. 使用从被装饰过的父组件中继承得到的 this.props.styles
← React Router学习笔记
PostCSS学习笔记 →

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Related Posts

  • CSS3学习笔记
  • Sass学习笔记
  • CSS知识集锦

Recent Posts

  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
  • A Comprehensive Study of Kotlin for Java Developers
  • 背诵营笔记
  • 利用LangChain和语言模型交互
  • 享学营笔记
ABOUT ME

汪震 | Alex Wong

江苏淮安人,现居北京。目前供职于腾讯云,专注容器方向。

GitHub:gmemcc

Git:git.gmem.cc

Email:gmemjunk@gmem.cc@me.com

ABOUT GMEM

绿色记忆是我的个人网站,域名gmem.cc中G是Green的简写,MEM是Memory的简写,CC则是我的小天使彩彩名字的简写。

我在这里记录自己的工作与生活,同时和大家分享一些编程方面的知识。

GMEM HISTORY
v2.00:微风
v1.03:单车旅行
v1.02:夏日版
v1.01:未完成
v0.10:彩虹天堂
v0.01:阳光海岸
MIRROR INFO
Meta
  • Log in
  • Entries RSS
  • Comments RSS
  • WordPress.org
Recent Posts
  • Investigating and Solving the Issue of Failed Certificate Request with ZeroSSL and Cert-Manager
    In this blog post, I will walk ...
  • A Comprehensive Study of Kotlin for Java Developers
    Introduction Purpose of the Study Understanding the Mo ...
  • 背诵营笔记
    Day 1 Find Your Greatness 原文 Greatness. It’s just ...
  • 利用LangChain和语言模型交互
    LangChain是什么 从名字上可以看出来,LangChain可以用来构建自然语言处理能力的链条。它是一个库 ...
  • 享学营笔记
    Unit 1 At home Lesson 1 In the ...
  • K8S集群跨云迁移
    要将K8S集群从一个云服务商迁移到另外一个,需要解决以下问题: 各种K8S资源的迁移 工作负载所挂载的数 ...
  • Terraform快速参考
    简介 Terraform用于实现基础设施即代码(infrastructure as code)—— 通过代码( ...
  • 草缸2021
    经过四个多月的努力,我的小小荷兰景到达极致了状态。

  • 编写Kubernetes风格的APIServer
    背景 前段时间接到一个需求做一个工具,工具将在K8S中运行。需求很适合用控制器模式实现,很自然的就基于kube ...
  • 记录一次KeyDB缓慢的定位过程
    环境说明 运行环境 这个问题出现在一套搭建在虚拟机上的Kubernetes 1.18集群上。集群有三个节点: ...
  • eBPF学习笔记
    简介 BPF,即Berkeley Packet Filter,是一个古老的网络封包过滤机制。它允许从用户空间注 ...
  • IPVS模式下ClusterIP泄露宿主机端口的问题
    问题 在一个启用了IPVS模式kube-proxy的K8S集群中,运行着一个Docker Registry服务 ...
  • 念爷爷
      今天是爷爷的头七,十二月七日、阴历十月廿三中午,老人家与世长辞。   九月初,回家看望刚动完手术的爸爸,发

  • 6 杨梅坑

  • liuhuashan
    深圳人才公园的网红景点 —— 流花山

  • 1 2020年10月拈花湾

  • 内核缺陷触发的NodePort服务63秒延迟问题
    现象 我们有一个新创建的TKE 1.3.0集群,使用基于Galaxy + Flannel(VXLAN模式)的容 ...
  • Galaxy学习笔记
    简介 Galaxy是TKEStack的一个网络组件,支持为TKE集群提供Overlay/Underlay容器网 ...
TOPLINKS
  • Zitahli's blue 91 people like this
  • 梦中的婚礼 64 people like this
  • 汪静好 61 people like this
  • 那年我一岁 36 people like this
  • 为了爱 28 people like this
  • 小绿彩 26 people like this
  • 彩虹姐姐的笑脸 24 people like this
  • 杨梅坑 6 people like this
  • 亚龙湾之旅 1 people like this
  • 汪昌博 people like this
  • 2013年11月香山 10 people like this
  • 2013年7月秦皇岛 6 people like this
  • 2013年6月蓟县盘山 5 people like this
  • 2013年2月梅花山 2 people like this
  • 2013年淮阴自贡迎春灯会 3 people like this
  • 2012年镇江金山游 1 people like this
  • 2012年徽杭古道 9 people like this
  • 2011年清明节后扬州行 1 people like this
  • 2008年十一云龙公园 5 people like this
  • 2008年之秋忆 7 people like this
  • 老照片 13 people like this
  • 火一样的六月 16 people like this
  • 发黄的相片 3 people like this
  • Cesium学习笔记 90 people like this
  • IntelliJ IDEA知识集锦 59 people like this
  • 基于Kurento搭建WebRTC服务器 38 people like this
  • Bazel学习笔记 37 people like this
  • PhoneGap学习笔记 32 people like this
  • NaCl学习笔记 32 people like this
  • 使用Oracle Java Mission Control监控JVM运行状态 29 people like this
  • Ceph学习笔记 27 people like this
  • 基于Calico的CNI 27 people like this
Tag Cloud
ActiveMQ AspectJ CDT Ceph Chrome CNI Command Cordova Coroutine CXF Cygwin DNS Docker eBPF Eclipse ExtJS F7 FAQ Groovy Hibernate HTTP IntelliJ IO编程 IPVS JacksonJSON JMS JSON JVM K8S kernel LB libvirt Linux知识 Linux编程 LOG Maven MinGW Mock Monitoring Multimedia MVC MySQL netfs Netty Nginx NIO Node.js NoSQL Oracle PDT PHP Redis RPC Scheduler ServiceMesh SNMP Spring SSL svn Tomcat TSDB Ubuntu WebGL WebRTC WebService WebSocket wxWidgets XDebug XML XPath XRM ZooKeeper 亚龙湾 单元测试 学习笔记 实时处理 并发编程 彩姐 性能剖析 性能调优 文本处理 新特性 架构模式 系统编程 网络编程 视频监控 设计模式 远程调试 配置文件 齐塔莉
Recent Comments
  • qg on Istio中的透明代理问题
  • heao on 基于本地gRPC的Go插件系统
  • 黄豆豆 on Ginkgo学习笔记
  • cloud on OpenStack学习笔记
  • 5dragoncon on Cilium学习笔记
  • Archeb on 重温iptables
  • C/C++编程:WebSocketpp(Linux + Clion + boostAsio) – 源码巴士 on 基于C/C++的WebSocket库
  • jerbin on eBPF学习笔记
  • point on Istio中的透明代理问题
  • G on Istio中的透明代理问题
  • 绿色记忆:Go语言单元测试和仿冒 on Ginkgo学习笔记
  • point on Istio中的透明代理问题
  • 【Maven】maven插件开发实战 – IT汇 on Maven插件开发
  • chenlx on eBPF学习笔记
  • Alex on eBPF学习笔记
  • CFC4N on eBPF学习笔记
  • 李运田 on 念爷爷
  • yongman on 记录一次KeyDB缓慢的定位过程
  • Alex on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • will on Istio中的透明代理问题
  • haolipeng on 基于本地gRPC的Go插件系统
  • 吴杰 on 基于C/C++的WebSocket库
©2005-2025 Gmem.cc | Powered by WordPress | 京ICP备18007345号-2