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‘
  }]
}

CSS Modules使用方法