浅谈CSS的现世（未完待更）浅谈CSS的现世（未完待更）

现在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三件套：

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

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

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

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

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

var ForExample = React.createClass({ render: function() { return (Just for Fun!); } }); ReactDOM.render( , document.getElementById("select2") );

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

var forExample = { backgroundColor: "skyblue", color: "white" } var ForExample = React.createClass({ render: function() { return (Just for Fun!); } }); ReactDOM.render( , 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 (Just for Fun!); } }); ReactDOM.render( , document.getElementById("select3s") );

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

var ForExample = React.createClass({ render: function() { return (Just for Fun!); } });

第四种，更复杂的动态样式，这就要用到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 (变色，变大！); } }); ReactDOM.render( , document.getElementById("select4") );

这里的触发事件也很多，比如onKeyDown、onCopy等等，同样可以做到模拟CSS各事件。
* TO BE CONTINUED！*
【浅谈CSS的现世（未完待更）】然而，这些并不是实际react工程中常用的编写样式的方式，常用的一般是文章开始时提到的一些CSS模块化组件。这些，我们下次再说吧！( ?? ω ?? )y