ReactJS material-ui 使用的css in js理念

material-ui是一套应用了谷歌material design风格的react component，除了炫酷的效果外，值得探讨的是CSS in JS的理念，该套件没有单独的CSS文件，每个component自己持有自己的CSS，或者说是“css inline”，将CSS写到JS中。

有些人认为这是一种倒退，好不容易分出来的层，又被混到一起了。原来的那些CSS写法，Less，Sass 都不好使了，得用看起来很别扭的方式来写。这其实涉及到比较深的问题，在大型项目中，我们讲一横一纵，一横指的是分层，分层的目的是隔离，隔离的是不同工种，美工、前端工程师、后端工程师，让不同工种可以并行工作。一纵指的是模块化，目的也是隔离，隔离的是同一工种。而分层和模块化，二者往往是相互矛盾的。目前的前端框架，还没有能把这个问题处理好的。

是源于CSS和JS是两套完全不同的类系统，要么以CSS类为准如（Bootstrap、Semantic UI），要么是以JS类为准，web component理念的一类，ReactJS属于后者。

在material-ui 网站上关于这个问题官方推荐了看下面的讨论
https://github.com/callemall/material-ui/issues/30

其中的基础文章是一份PPT，因为有墙的原因，所以上传到国内，方便阅读。是facebook 工程师对CSS in JS理念的介绍，很重要。

原文地址 https://speakerdeck.com/vjeux/react-css-in-js

PDF国内转载地址 http://download.csdn.net/detail/tywinstark/9084503