如何科学的组织React组件样式

React的组件式开发，让咱们能够利用其Component Model，专一于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并非webpack配置教程，不会介绍详细的配置过程，假设大家已经用过了css-loader style-loader extract-text-webpack-plugin。

正在使用的方式

咱们理想中的文件结构可能会是这样的：

- components
    - modal
        - modal.jsx
        - modal.css  // 能够是任意预处理器
    - dropdown
        - dropdown.jsx
        - dropdown.css

然而，js如今能够作模块化，css并不行，全部css的定义均可以被视为全局变量，在css被打包后，一个组件的样式有可能会影响到其余组件，因而咱们能够经过命名约定（name convention）来曲线救国（这一点并不局限于react开发）。

@modal-prefix: modal;

.@{modal-prefix} {
}

.@{modal-prefix}-title {
}

相似于上面的使用less的方式，在文件顶部先定义个类的前缀，来尽可能避免命名冲突的可能。因而在组件中就能够这样作

import React from 'react';
import './modal.less';

export default React.createClass({
    render () {
        return 

<div className="modal-title">Hello</div>

;
    }
});

上面就是我如今在用的方式，利用命名约定作到了伪模块化（其实即使不是在使用react开发项目，也会用相似的方式）。

CSS in JS

以前看到过一个ppt：https://speakerdeck.com/vjeux/react-css-in-js，谈到了相似的问题。

一个方向是把样式也直接写进组件里，即便用inline style。首先，直接用传统的inline style并不可取，它对属性的支持有限，好比不能用伪类、多个不一样浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言，在react中却是还行：将须要重用的样式对象做为模块导出便可。

其实你们很努力地但愿CSS in JS能够实现，好比：

react-style

github地址

它的局限就是上面提到过的属性支持的问题，没有细究这个东西，不太喜欢。

local scoped CSS

https://github.com/css-modules/css-modules
https://github.com/webpack/css-loader#local-scope

用这个东西如今是webpack官方支持的，已在css-loader中实现，能够真正让你的css代码做为本地声明，相似的代码：

// style.css
:local(.title) { background: red; }

在须要这份样式的组件里引入这个模块：

import styles from 'style.css'



<div className={styles.title}></div>

首先css的语法中是不支持这个:local()的，咱们先看看页面最终的代码：

<div class="_3dpOqNNJl6oyjYpdDHCFD9" data-reactid=".0.2.1">Info</div>

到这里应该明白了，其实这也算是个预处理器，它将:local(.title)的类名变成了一个哈希值，仅能够经过模块导入的方式来获取这个哈希值并应用到组件上（生成的类名是能够配置的）。如今css-loader能够经过添加module选项（详细内容能够参考上面CSS Modules的连接）使得css默认定义的是local scoped的，但愿共享的能够用:global()定义。

也能够和预处理器混用：

:global {
  .global-class-name {
    color: green;
  }
}

目前看下来，它只对class名作哈希，也就是说：

:local(.title span) // .[hash] span

然而

:local(.title .name) // .[hash0] .[hash1]

这个算是一个有意思的方式，首先它依赖于webpack，而webpack并不局限于React的开发，任何前端项目均可以使用webpack，那么就也均可以使用CSS Modules的概念，不知道这个CSS Modules会有怎么样的发展，感受能够尝试。

这里是一个使用样例：https://github.com/css-modules/webpack-demo

写在最后的话

目前的探索结果暂时是这样，以后可能会继续来填坑。反正如今应该不会去用CSS in JS，CSS Modules能够一试，由于css-loader这个插件基本react的项目里都会使用，写好的组件一个import， 样式和组件都有了，不过仍需实践。