现在JavaScript的发展速度很快，有了很多的功能，被用到了更多的领域。JS社区的人已经疯了，提出了JoT的概念，即“JavaScript of Things”，万物皆用JavaScript，是不是很熟悉？对的对的，最近一直大热的物联网（Internet of Things，简称IoT）便是他们的下一个发展的目标，而这次主角只有一个弱类型语言——JavaScript，企图统一世界。作为JS的好姬友，HTML也升级成HTML5而成为开发者的新宠儿。再来看看同是三剑客之一的CSS，虽然CSS3有了很多新特性，但是由于CSS本身的功能局限性，以及模块化困难而造成的诸多不便，使很多开发者走向了极端，即舍弃CSS，改用JS和JSON来编写样式（CSS：你咋不上天！），于是诞生了诸如 reactcss，Radium，jsxstyle，react-style 之类的模块化样式。此外，还有一种主流的CSS模块化解决方案是，将CSS与JS结合，用JS来管理CSS模块，比如CSS Modules。这些模块化的样式为管理样式带来了便利，同时也为CSS注入了新活力。

react.js中的CSS模块化实现方法

---

今天我们先来谈谈react.js中自带的CSS模块化语法（注意这里的CSS模块化写法是react内有的，和reactCSS与react-style这些可维护模块不一样），这是一个完全使用JavaScript来定义样式的方法。与曾经的链入外部样式表不同，react.js更提倡inline style，即内嵌式样式表。

* BEFORE！*

---

首先，我们得入门 react.js，得引入react三件套：

<!-- react -->
<script type="text/javascript" src="js/browser.min.js" ></script>
<script type="text/javascript" src="js/react.min.js" ></script>
<script type="text/javascript" src="js/react-dom.min.js" ></script>

一定要注意** 顺序**！

* START！*

---

• ** 第一种**，也是最容易理解的一种写法，即普通地使用class选择器来写CSS样式：

/*common.css*/
.forExample {
    background-color: skyblue;
    color: white;
}

/*common.js*/
var ForExample = React.createClass({
    render: function() {
        return (
            <div className="forExample">
                Just for Fun!
            </div>
        );
    }
});
ReactDOM.render(
    <ForExample />,
    document.getElementById("select1")
);

• ** 第二种**，也是最直接的写法，直接在虚拟DOM上写入内联样式，即inline style：

var ForExample = React.createClass({
    render: function() {
        return (
            <div style={{
                backgroundColor: "skyblue",
                color: "white"
            }}>
                Just for Fun!
            </div>
        );
    }
});
ReactDOM.render(
    <ForExample />,
    document.getElementById("select2")
);

• ** 第三种**，稍微复杂点，但是可以重复利用，维护起来很方便，而且也很美观：

var forExample = {
    backgroundColor: "skyblue",
    color: "white"
}
var ForExample = React.createClass({
    render: function() {
        return (
            <div style={forExample}>
                Just for Fun!
            </div>
        );
    }
});
ReactDOM.render(
    <ForExample />,
    document.getElementById("select3")
);

• ** 第三种 plus**，一种充分利用JSON结构来写的样式，更有条理，易于维护和引用：

var colour = {
    text: {
        red: {
            color: "#e65051",
        },
        gray: {
            color: "#a0a0a0",
        },
        white: {
            color: "#FFFFFF",
        }
    },
    bg: {
        red: {
            backgroundColor: "#e65051",
        },
        gray1: {
            backgroundColor: "#ededed",
        },
        gray2: {
            backgroundColor: "#f7f7f7", 
        },
    },
};
var ForExample = React.createClass({
    render: function() {
        return (
            <div style={colour.text.red}>
                Just for Fun!
            </div>
        );
    }
});
ReactDOM.render(
    <ForExample />,
    document.getElementById("select3s")
);

当然，如果你想对一个目标引用多个样式的话，就要用到JSON数据的拼接。方便点，可以引入jQuery文件，使用extend()方法，如：

var ForExample = React.createClass({
    render: function() {
        return (
            <div style={$.extend({}, colour.text.red, colour.bg.red)}>
                Just for Fun!
            </div>
        );
    }
});

• 第四种，更复杂的动态样式，这就要用到react中的state来重新触发渲染，以下就是一个点击（onClick）后文字变色变大的demo：

var ChangeGame = React.createClass({
    
    getInitialState: function() {
        return {colorX: "skyblue", fontSizeX: "20px"};
    },
    
    guessWhat: function(event) {
        this.setState({colorX: "blue", fontSizeX: "50px"});
    },
    
    render: function() {
        return (
            <div onClick={this.guessWhat} style={{color: this.state.colorX, fontSize: this.state.fontSizeX}}>
                变色，变大！
            </div>
        );
    }
});
ReactDOM.render(
    <ChangeGame />,
    document.getElementById("select4")
);

这里的触发事件也很多，比如onKeyDown、onCopy等等，同样可以做到模拟CSS各事件。

* TO BE CONTINUED！*

---

然而，这些并不是实际react工程中常用的编写样式的方式，常用的一般是文章开始时提到的一些CSS模块化组件。这些，我们下次再说吧！( •̀ ω •́ )y