css modules调研

css模块化解决方案

• 抛弃css (Radium,jsxstyle,react-style)
• 利用js来管理样式依赖(css Modules)

css模块化面临的问题

• 全局污染
• 命名混乱
• 依赖管理不彻底
• 无法共享变量
• 代码压缩不彻底

启用CSS Modules,webpack配置

...{ ???test: /\.css$/, ???use: [ ???????{ ???????????loader: ‘style-loader‘ ???????}, ???????{ ???????????loader: ‘css-loader?modules&localIdentName=[name]-[hash:base64:5]‘ ???????} ???]},...

在项目当中使用

Test.jsx

import React, { Component } from ‘react‘;// 将样式文件当成模块引入import styles from "./test.css";export default class Test extends Component { ???render() { ???????return ( ???????????<div> ???????????????<div className={styles.test}>测试</div> ???????????</div> ???????) ???}}

test.css

.test { ???color: red;}

以上就是CSS Modules的基本用法

用法进阶

全局样式和局部样式

开启CSS Modules之后默认的样式都为局部样式

// css 样式(:global)(.test1) { ???color: blue;}或者如下(定义多个全局样式):global { ???.test1 { ???????color: blue; ???} ???.test2 { ???????color: red; ???}}// 全局样式写法和之前一样import React, { Component } from ‘react‘;import styles from "./test.css";export default class Test extends Component { ???render() { ???????return ( ???????????<div> ???????????????<div className="test1">测试</div> ???????????</div> ???????) ???}}

Compose 组合样式

// 样式文件.base { ????font-size: 20px; }.normal { ?composes: base; ?color: #333;}.disabled { ?composes: base; ?color: #ddd;}// 组件中import React, { Component } from ‘react‘;import styles from "./test.css";export default class Test extends Component { ???render() { ???????return ( ???????????<div> ???????????????<div className="normal">测试</div> ???????????</div> ???????) ???}}// 编译后的html文件<d class="div--base-daf62 div--normal-abc53">测试</div>// 由于在 .normal 中 composes 了 .base，编译后会 normal 会变成两个 class。

CSS Modules 使用技巧

• 不使用选择器，只使用class名来定义样式
• 不叠加多个class
• 所有样式通过composes组合来实现复用
• 不嵌套

CSS Modules React 项目实践

import classNames from ‘classnames‘;import styles from ‘./dialog.css‘;export default class Dialog extends React.Component { ?render() { ???const cx = classNames({ ?????[styles.confirm]: !this.state.disabled, ?????[styles.disabledConfirm]: this.state.disabled ???}); ???return <div className={styles.root}> ?????<a className={cx}>Confirm</a> ?????... ???</div> ?}}

关于样式覆盖问题

因为CSS Modules 不会覆盖属性选择器,所以可以利用属性选择器来解决这个问题

// 组件中...return ( ???<div data-role=‘test‘> ???????测试 ???</div>)...// 样式[data-role="test"] { ???color: red;}

如何与全局样式共存

import Component from ‘./view/Component‘// 全局样式import ‘./styles/app.scss‘;// 以下为组件相关样式(局部样式)import ‘./Component.scss‘;

SASS与CSS Modules配合使用

module: { ?loaders: [{ ???test: /\.jsx?$/, ???loader: ‘babel‘ ?}, { ???test: /\.scss$/, ???exclude: path.resolve(__dirname, ‘src/styles‘), ???loader: ‘style-loader!css-loader?modules&localIdentName=[name]__[local]!sass?sourceMap=true‘ ?}, { ???test: /\.scss$/, ???include: path.resolve(__dirname, ‘src/styles‘), ???loader: ‘style-loader!css-loader!sass-loader?sourceMap=true‘ ?}]}