React CSS Modules（译文）

原文地址：react-css-modules
阅读本文前建议了解 CSS Modules 的知识。墙裂推荐阅读 Cam 的文章 CSS Modules详解及React中实践

React CSS Modules 实现了自动化映射 CSS modules。每个 CSS 类都被赋予了一个带有全局唯一名字的本地标识符。 CSS Modules 实现了模块化和复用性。

CSS Modules

CSS Mosules 碉堡了。如果你对 CSS Modules 还不够熟悉，那么没关系，它只是一个使用 webpack 之类的模块打包机加载 CSS 作用于特定文档的概念。CSS module loader 将为每一个 CSS 类在加载 CSS 文档（确切的说，这个文档就是Interoperable CSS）的时候生成一个唯一的名字。你可以来看下这个 CSS Modules 实践例子——webpack-demo。

在React语法环境中，CSS Modules 看起来是这样子的：

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;

组件渲染出来后会生成类似于这样的一个标记：

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___2w27N">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

同时也会生成对应的匹配那些CSS类的CSS文件，是不是碉堡了？！

webpack `css-loader`

CSS Modules 是一个可以被多种方法实现的规范。react-css-modules 利用 webpack css-loader 所提供的功能启用了现有的 CSS Modules 的集成。

现有的问题

webpack 的 css-loader 本身有几处劣势：

你必须使用驼峰式类名。
无论何时构建一个 className 你都必须使用 style 对象。
混合类模块以及全局 CSS 类不够灵活。
引用一个未定义的 CSS 模块时解析结果为 undefines ,但并无相关警告提示。

React CSS Modules 组件自动加载应用了 styleName 特性的 CSS Modules ，例如：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

使用 react-css-modules 好处多多：

你不用再被强制使用驼峰式命名规则
你不必每次使用一个 CSS 模块时还要引用 styles 对象。
有一个明显的区别在全局 CSS 和 CSS Modules 之间，示例如下：
```
<div className='global-css' styleName='local-module'></div>
```
当 styleName 引用一个为定义的 CSS Module 时，你会得到一个警告信息。（errorWhenNotFound 选项）
你可以为每一个 ReactElement 只使用单独的 CSS Module。（allowMultiple 选项）。

实现

react-css-modules 扩展了目标组件的 render 方法。它将根据 styleName 的值在关联的 style 对象中查找对应的 CSS Modules，并为 ReactElement className 属性值添加相匹配的独一无二的 CSS 类名。

碉堡了！

你可以参照下这个例子进一步加深印象，react-css-modules-examples。

用法

设置包括：

设置一个 module bundler 加载 Interoperable CSS。
使用 react-css-modules 修整你的组件。

如何设置一个 `module bundler`呢？

webpack

开发模式

开发环境下，若你想启用 Sourcemaps，并要使用 webpack 的 Hot Module Replacement (HMR，热替换)。style-loader 已经支持 HMR。因此，Hot Module Replacement 开箱即用。

设置步骤：

安装 style-loader。
安装 css-loader。
设置 /\.css$/ 加载器，如下：

{
    test: /\.css$/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

生产模式

在生产环境中，如果你想把CSS单独提取出来的话，你需要了解这样做的好处和坏处。

优点：

更少的样式标签

CSS SourceMap

CSS 并行请求

CSS 缓存分离

页面渲染更快（更少的代码以及更少的 DOM 操作）

缺点：

额外的 HTTP 请求

较长的编译时间

较复杂的配置

不支持变更运行环境公共路径

不支持 Hot Module Replacement

— extract-text-webpack-plugin

设置步骤：

安装 style-loader
安装 css-loader
使用 extract-text-webpack-plugin 提取 CSS 到一个单独的样式表。

设置 /\.css$/ 加载器：

{
    test: /\.css$/,
    loader: ExtractTextPlugin.extract('style', 'css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]')
}

设置 extract-text-webpack-plugin 插件：

new ExtractTextPlugin('app.css', {
    allChunks: true
})

完整实例请参照 webpack-demo 或者 react-css-modules-examples。

Browserify（如果你是使用这个构建工具的话）

请参考 css-modulesify。

扩展组件样式

使用 styles 属性重写默认的组件样式。

示例如下：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

在这个例子中，CSSModules 被用来美化 Table 组件通过引用 ./table.css CSS 模块。当 Table 组件渲染完毕，它将使用 styles 对象的属性构建 className 的值。

使用 styles 属性你可以覆盖组件默认的 styles 对象。例如：

import customStyles from './table-custom-styles.css';

<Table styles={customStyles} />;

Interoperable CSS 可以扩展其他 ICSS。利用这个功能可以扩展默认样式，例如：

/* table-custom-styles.css */
.table {
    composes: table from './table.css';
}

.row {
    composes: row from './table.css';
}

/* .cell {
    composes: cell from './table.css';
} */

.table {
    width: 400px;
}

.cell {
    float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;
}

在这个例子中，table-custom-styles.css 有选择的扩展了 table.css (Table 组件的默认样式）。
这里是一个更直观的实践例子：UsingStylesProperty example`。

`style` 属性

包装过的组件继承了 styles 属性，该属性描述了 CSS 模块和 CSS 类之间的映射关系。

class extends React.Component {
    render () {
        <div>
            <p styleName='foo'></p>
            <p className={this.props.styles.foo}></p>
        </div>;
    }
}

在上面示例中，styleName='foo' 和 className={this.props.styles.foo} 是等价的。
styles 属性是为 Loops and Child Components 实现组件包装而特意设计的！

Loops and Child Components

styleName 不能去定义一个由其他组件生成的 React元素的样式。例如：

import React from 'react';
import CSSModules from 'react-css-modules';
import List from './List';
import styles from './table.css';

class CustomList extends React.Component {
    render () {
        let itemTemplate;

        itemTemplate = (name) => {
            return <li styleName='item-template'>{name}</li>;
        };

        return <List itemTemplate={itemTemplate} />;
    }
}

export default CSSModules(CustomList, styles);

上面的实例将不会工作。CSSModules 被用来包装 CustomList 组件。然而，它是呈现 itemTemplage 的列表组件。

为了解决这个问题，包装过的组件继承了样式属性，这样你可以将它作为一个常规的 CSS 模块对象来使用。
因此，前面的例子可以改写为这样：

import React from 'react';
import CSSModules from 'react-css-modules';
import List from './List';
import styles from './table.css';

class CustomList extends React.Component {
    render () {
        let itemTemplate;

        itemTemplate = (name) => {
            return <li className={this.props.styles['item-template']}>{name}</li>;
        };

        return <List itemTemplate={itemTemplate} />;
    }
}

export default CSSModules(CustomList, styles);

在把子组件传递给渲染组件之前，如果你使用了 CSSMmodules 包装这个子组件，那么你就可以在这个子组件内使用 styleName 属性了。例如：

import React from 'react';
import CSSModules from 'react-css-modules';
import List from './List';
import styles from './table.css';

class CustomList extends React.Component {
    render () {
        let itemTemplate;

        itemTemplate = (name) => {
            return <li styleName='item-template'>{name}</li>;
        };

        itemTemplate = CSSModules(itemTemplate, this.props.styles);

        return <List itemTemplate={itemTemplate} />;
    }
}

export default CSSModules(CustomList, styles);

包装

/**
 * @typedef CSSModules~Options
 * @see {@link https://github.com/gajus/react-css-modules#options}
 * @property {Boolean} allowMultiple
 * @property {Boolean} errorWhenNotFound
 */

/**
 * @param {Function} Component
 * @param {Object} defaultStyles CSS Modules class map.
 * @param {CSSModules~Options} options
 * @return {Function}
 */

你需要用 react-css-modules 包装你的组件，例如：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

class Table extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

export default CSSModules(Table, styles);

就这么简单！

顾名思义，react-css-modules 和 ES7 decorators 语法是兼容的。例如：

import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';

@CSSModules(styles)
export default class extends React.Component {
    render () {
        return <div styleName='table'>
            <div styleName='row'>
                <div styleName='cell'>A0</div>
                <div styleName='cell'>B0</div>
            </div>
        </div>;
    }
}

简直碉堡了！

这里有一个用 webpack 构建的示例，你可以看下 react-css-modules-examples

Options

CSSModules 函数提供了一些选项在第三个参数的位置上。

CSSModules(Component, styles, options);

或者作为第二个参数：

@CSSModules(styles, options);

`allowMultiple`

默认：false。
允许多个样式模块名字。
当 false，以下会引起一个错误。

<div styleName='foo bar' />

`errorWhenNotFound`

默认：true。
当 styleName 不能匹配到一个未定义的 CSS Module 时将抛出一个错误。

SASS, SCSS, LESS 以及其他 CSS 预处理器

Interoperable CSS 和 CSS 预处理器是兼容的。使用预处理器，你只需添加这个预处理器到 loaders 的数组中即可。例如在这个 webpack 的例子中，它就像安装 sass-loader 一样简单，添加 !sass 到 style-loader 加载器查询的末尾（加载器是从右到左被依次执行的）：

{
    test: /\.scss$/,
    loaders: [
        'style',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'resolve-url',
        'sass'
    ]
}

开启 Sourcemaps

开启 CSS Source maps，需要在 css-loader 和 sass-loader 中添加参数 sourceMap

{
    test: /\.scss$/,
    loaders: [
        'style?sourceMap',
        'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
        'resolve-url',
        'sass?sourceMap'
    ]
}

类组合

CSS Mosules 促进了类组合模式，也就是说，每一个用在组件里的 CSS Module 应该定义描述一个元素所需的全部属性。如：

.box {
    width: 100px;
    height: 100px;
}

.empty {
    composes: box;

    background: #4CAF50;
}

.full {
    composes: box;

    background: #F44336;
}

类组合促进了标记和语义化样式更好的分离，如果没有 CSS Modules，这点将难以实现。

因为 CSS Module 中的类名是本地的，允许你使用诸如 'empty' 或 'full' 这些通用的类名，而无需再加上'box-' 前缀，简直完美！！

想学更多的类组合规则？我建议你读下 Glen Maddern 的关于 CSS Modules 的文章，还有官方文档 spec of the CSS Modules。

类组合解决了什么问题？

设想下有这么个例子：

.box {
    width: 100px;
    height: 100px;
}

.box-empty {
    background: #4CAF50;
}

.box-full {
    background: #F44336;
}

<div class='box box-empty'></div>

这是标准的 OOCSS 模式，这种模式最大的问题就是，如果你想改变样式，你几乎每次还要修改 HTML。

类组合也可以使用 CSS 预处理器

接下来是一个学习实践，以加深对类组合本质的理解。CSS Modules 支持一个本机方法，该方法是要组合的 CSS Mosules 使用 composes 关键字实现的。CSS 预处理不是必须的。

在 SCSS 中你可以使用 @extend 关键字，和使用 Mixin Directives去写组合，例如：

使用 @extend :

%box {
    width: 100px;
    height: 100px;
}

.box-empty {
    @extend %box;

    background: #4CAF50;
}

.box-full {
    @extend %box;

    background: #F44336;
}

编译后，得到：

.box-empty,
.box-full {
    width: 100px;
    height: 100px;
}

.box-empty {
    background: #4CAF50;
}

.box-full {
    background: #F44336;
}

使用 mixins：

@mixin box {
    width: 100px;
    height: 100px;
}

.box-empty {
    @include box;

    background: #4CAF50;
}

.box-full {
    @include box;

    background: #F44336;
}

编译后，得到：

.box-empty {
    width: 100px;
    height: 100px;
    background: #4CAF50;
}

.box-full {
    width: 100px;
    height: 100px;
    background: #F44336;
}

全局样式

CSS Modules 不会限制你使用全局 CSS。用法如下：

:global .foo {

}

但是呢，还是请你谨慎使用全局样式。在使用 CSS Modules 过程中，只有少数情况下才会用到全局样式，例如：normalization。

多个 CSS Modules

避免使用多个 CSS Modules 去描述单个元素。详见本文档前面的 类组合 部分介绍。

但是如果你非要使用多个 CSS Modules 去描述一个元素，那么就开启 allowMultiple 选项。（参见文档前面选项部分）。当多个 CSS Modules 被用来描述一个元素时，react-css-modules 将会为每一个在 styleName 声明中匹配的 CSS Module 附加一个独一无二的类名。如：


.button {

}

.active {

}

<div styleName='button active'></div>

这会把Interoperable CSS 和 CSS class 都映射到目标元素上。

最后编辑于：2017.12.03 02:42:40

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,902评论 5赞 468
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,037评论 2赞 377
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,978评论 0赞 332
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,867评论 1赞 272
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,763评论 5赞 360
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,104评论 1赞 277
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,565评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,236评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,379评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,313评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,363评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,034评论 3赞 315
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,637评论 3赞 303
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,719评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,952评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,371评论 2赞 346
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,948评论 2赞 341