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



你可能感兴趣的:(前端技术)