css-module

kailian 2016-10-06

什么是CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. (CSS模块就是所有的类名都只有局部作用域的CSS文件)。

All URLs (url(…)) and @imports are in module request format (./xxx and ../xxx means relative, xxx and xxx/yyy means in modules folder, i. e. in node_modules).

大规模的css的问题

  1. Global Namespace 全局命名空间

  2. Dependencies 依赖

  3. Dead Code Elimination 无用代码删除

  4. Minification 压缩

  5. Sharing Constants 共享常量

  6. Non-deteministic Resolution 不确定分辨率

  7. Isolation 作用域隔离

CSS Modules将作用域限制于组件中，从而避免了全局作用域的问题。可以使用简单的类命令而不必担心污染全局作用域。在支持样式复用的同时，避免命名冲突。

工作原理

CSS Modules need to be piped in a build step. 需要构建才能使用，可以看成webpack的一个组件。

基本工作方式是：当你在一个JavaScript模块中导入一个CSS文件时（例如，在一个 React 组件中），CSS模块将会定义一个对象，将文件中类的名字动态的映射为JavaScript作用域中可以使用的字符串。

  1. import styles from "./submit-button.css"
  3. styles: {
  4.   common: "components_submit_button__common__abc5436",
  5.   normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547",
  6.   error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"
  7. }

CSS Modules特性

Naming

button组件分别使用BEM Style和CSS Modules

BEM Style

  1. /* components/submit-button.css */
  2. .Button { /* all styles for Normal */ }
  3. .Button--disabled { /* overrides for Disabled */ }
  4. .Button--error { /* overrides for Error */ }
  5. .Button--in-progress { /* overrides for In Progress */
  1. <button class="Button Button--in-progress">Processing...</button>

With CSS Modules

  1. /* components/submit-button.css */
  2. .normal { /* all styles for Normal */ }
  3. .disabled { /* all styles for Disabled */ }
  4. .error { /* all styles for Error */ }
  5. .inProgress { /* all styles for In Progress */

类名在工程中不需要唯一，可以看成是在JavaScript模块中使用的类在样式表中的别名

使用require或者import引入css

  1. import styles from './submit-button.css';
  3. buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

编译后最终生成

  1. import { Component } from 'react';
  2. import styles from './submit-button.css';
  4. export default class SubmitButton extends Component {
  5.   render() {
  6.     let className, text = "Submit"
  7.     if (this.props.store.submissionInProgress) {
  8.       className = styles.inProgress
  9.       text = "Processing..."
  10.     } else if (this.props.store.errorOccurred) {
  11.       className = styles.error
  12.     } else if (!this.props.form.valid) {
  13.       className = styles.disabled
  14.     } else {
  15.       className = styles.normal
  16.     }
  17.     return <button className={className}>{text}</button>
  18.   }
  19. }
  1. <button class="components_submit_button__normal__abc5436">
  2.   Processing...
  3. </button>

Composition

  1. .className {
  2.   color: green;
  3.   background: red;
  4. }
  6. .otherClassName {
  7.   composes: className;
  8.   color: yellow;
  9. }
  1. .common { /* font-sizes, padding, border-radius */ }
  2. .normal { composes: common; /* blue color, light blue background */ }
  3. .error { composes: common; /* red color, light red background */ }
  6. .components_submit_button__common__abc5436 { /* font-sizes, padding, border-radius */ }
  7. .components_submit_button__normal__def6547 { /* blue color, light blue background */ }
  8. .components_submit_button__error__1638bcd { /* red color, light red background */ }
  10. import styles from "./submit-button.css"
  12. styles: {
  13.   common: "components_submit_button__common__abc5436",
  14.   normal: "components_submit_button__common__abc5436 components_submit_button__normal__def6547",
  15.   error: "components_submit_button__common__abc5436 components_submit_button__error__1638bcd"
  16. }

Dependencies 继承样式

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

global 定义全局样式

  1. :global(.clearfix::after) {
  2.   content: '';
  3.   clear: both;
  4.   display: table;
  5. }

webpack和react中使用

webpack-demo

webpack将CSS文件作为CSS模块

  1. {
  2.   test: /\.css$/,
  3.   loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
  4. }

自定义hash类名

  1. [name]__[local]___[hash:base64:5]

react-css-modules

  1. import React from 'react';
  2. import CSSModules from 'react-css-modules';
  3. import styles from './table.css';
  5. class Table extends React.Component {
  6.     render () {
  7.         return <div styleName='table'>
  8.             <div styleName='row'>
  9.                 <div styleName='cell'>A0</div>
  10.                 <div styleName='cell'>B0</div>
  11.             </div>
  12.         </div>;
  13.     }
  14. }
  16. export default CSSModules(Table, styles);

使用styles可以重写组件的样式

  1. import customStyles from './table-custom-styles.css';
  3. <Table styles={customStyles} />;
  1. /* table-custom-styles.css */
  2. .table {
  3.     composes: table from './table.css';
  4. }
  6. .row {
  7.     composes: row from './table.css';
  8. }
  10. /* .cell {
  11.     composes: cell from './table.css';
  12. } */
  14. .table {
  15.     width: 400px;
  16. }
  18. .cell {
  19.     float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;
  20. }

参考

CSS Modules 详解及 React 中实践

understanding-the-css-modules-methodology

github-css-modules

css-modules

web64 css4