注：原文作者是来自facebook的前端基础设施团队的Christopher Chedeau。
大规模项目中面临的css问题：
- 全局命名空间
- 依赖
- 无用代码移除
- 压缩
- 共享常量
- 定制化
- 隔离
举个Button的例子：
/* button.css */
.button{
background: #f6f7f8 url(/images/button/background.png) repeat-x;
border: 1px solid #cdced0;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}
.button-depressed{
background-color: #4e69a2;
border-color:#c6c7ca;
color:#5890ff;
}
以上我们设计了一个button，存在常态和按下状态。
全局变量
在w3schools.com的JavaScript的最佳实践中，建议避免使用全局变量。
对于我来说，在css中仍然存在全局变量是一件让人疯狂的事情。在js编程中，我们很早就知道全局变量是不好的实践。
我们学习使用局部变量、自执行函数、模块化编程来解决全局变量的问题。
但是，在bootstrap的css中，存在超过600个的全局变量。
在Facebook,我们使用一种css扩展来解决这个问题。
/* button.css */
.button/container{
/* dropdown.css */
.dropdown/container .button/container{
这种方式，只有在button.css文件中的button/container样式才会参与build，如果视图在dropdown.css中使用，它将不会参与build.
如果需要导出全局变量，可以采用以下写法：
.button/container/public{
.dropdown/container .button/container/public{
调用部分：
/* button.css */
.button/container{
/* button.js */
<div className={cx('button/container')}>
因为button/container不是有效的classname,因此我们的调用方式需要发生变化，调用cx（class extension）来完成转换。
依赖
/* button.css */
.button/container{
/* button.js */
requireCSS('button')
<div className={cx('button/container')}>
以前我们把css打包到一个独立的文件中，现在我们把它们分割成一个个独立的文件，分别引入依赖。
很久以来，我们一直要求开发者只引入需要的css文件。但是如果其他人引入了某个css文件，它依旧会存在。
现在我们有了cx,它会进行静态分析，可以自动注入。
无用代码移除
因为cx是唯一生成样式的方式，这样我们可以解决最麻烦的问题：移除无用的代码。
压缩
通过cx可以最小化所有的classname，让js和css文件更小。
共享常量
.button/container{
/* keep in sync with button.js */
padding:5px;
//Keep in sync with button.css
var buttonPadding=5;
很长一段时间，我们采用注释或者命名约定的方式来共享常量。
现在我们引入了css变量。
/* button.css */
.button/container{
padding:var(button-padding);
var buttonPadding = cssVar('button-padding');
$CSSVar = array(
'button-padding' => 5,
);
由于facebook很多项目使用了php语言，所以我们在php中定义了css变量。
此时，我们依旧存在两个没有解决的问题：定制化和隔离。
css in js方案
这一刻我们等了很久...
/* button.js */
var styles = {
container: {
backgroud: '#f6f7f8 url(/images/button/background.png) repeat-x',
border: '1px solid #cdced0',
borderRadius: 2,
boxShadow: '0 1px 1px rgba(0,0,0,0.05)'
},
depressed: {
backgroundColor: '#4e69a2',
borderColor: '#c6c7ca',
color: '#5890ff'
}
};
我们使用内联样式来渲染
<div style={styles.container}>
内联样式并没有那么糟糕。
首先：我们依旧在一个独立的文件中编写样式；
其次：style实际比class语义上更好；
最后：我们并没有直接应用style，而是通过React Virtual DOM。
前五个问题顺利解决。
定制化
/* button.js */
propTypes:{
isDepressed:React.PropTypes.bool,
style:React.PropTypes.object,
},
<div style={m(
styles.container,
this.props.isDepressed && styles.depressed,
this.props.style
)}>
于是，我们同时解决了后两个问题。很明显，当在js中写样式，样式中的class只会独立出现相互隔离。
结论
我并不是要说服你们抛弃css，使用js。
我们有了大量的css库，例如less、sass...但是他们都没有解决上面的7大问题。
css也并不是web中存在底层缺陷的唯一部分，但是React在尝试解决他们中的一些问题。
我希望你们打破天花板，面对搭建web服务面临的困境，去思考、讨论并解决。
