现在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
