CSS modules

CSS 模块化一直是组件封装的难题。webpack(style-loader,css-loader) 提供了使用 JS module loader 来加载 CSS 的功能。但这只更多的只是对资源的声明依赖和加载，并不是 CSS 模块化。解决 CSS 模块化要解决：CSS 局部作用域的问题；CSS 模块的输入和输出。

css-modules通过生成唯一的 className，从工程角度上解决了 CSS 局部作用域的问题。css-modules 的输入和输出都是 JS 对象，这个对象是一系列local-className: global-className的映射（注意：输入输出不包含全局样式，可以通过css-loader?modules来开启默认局部样式，:global 开头是全局样式）。CSS 模块之间通过 composes 来组合。

React-css-modules通过high-order component点击预览的方式将 css-modules 自然地应用于 React component，并且使用 styleName 和 className 来区分 local CSS 和 global CSS。我给 react-css-modules 提了一个PR，用于解决自定义组件的样式，通过样式的声明顺序（先 import 组件，再 import 自定义 CSS 模块）来确保相同选择器下自定义样式具有更高的优先级（可以使用css-loader?modules&localIdentName=[local]-[hash:base64:5]，这样可以通过[local]标识 local-className，方便自定义样式）。注：PR 未通过，作者认为有些 hack，最终实现是可以给组件传递 styles 属性，不过是直接替换默认 styles。那么，如果我想在默认 styles 基础上修改一些样式，则需要在 css-modules 中处理，这部分讨论参见讨论。

import@H_403_1@ React from 'react'@H_403_1@ import@H_403_1@ ReactDOM from 'react-dom'@H_403_1@ import@H_403_1@ CSSModules from 'react-css-modules'@H_403_1@ import@H_403_1@ styles from './auto-ellipsis.css'@H_403_1@ @CSSModules@H_403_1@(styles) export@H_403_1@ default@H_403_1@ class@H_403_1@ AutoEllipsis@H_403_1@ extends@H_403_1@ React@H_403_1@.Component@H_403_1@ {@H_403_1@ static propTypes = { tag@H_403_1@: React.PropTypes.string,content@H_403_1@: React.PropTypes.string.isrequired,addTitle@H_403_1@: React.PropTypes.bool,styles@H_403_1@: React.PropTypes.object,}
    render() { const@H_403_1@ props = { styleName@H_403_1@: 'root'@H_403_1@,} const@H_403_1@ {tag,content} = this@H_403_1@.props return@H_403_1@ React.createElement(tag,props,content)
    }
}

关于 CSS 模块化 和 CSS 局域化可具体参考 hax 的关于前端开发中“模块”和“组件”概念的思考。