【译】react:css in js
注:原文作者是来自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.05); } .button-depressed{ background-color: #4e69a2; border-color:#c6c7ca; color:#5890ff; } 以上我们设计了一个button,存在常态和按下状态。 全局变量在w3schools.com的JavaScript的最佳实践中,建议避免使用全局变量。
对于我来说,在css中仍然存在全局变量是一件让人疯狂的事情。在js编程中,我们很早就知道全局变量是不好的实践。 /* 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打包到一个独立的文件中,现在我们把它们分割成一个个独立的文件,分别引入依赖。 无用代码移除因为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.05)' },depressed: { backgroundColor: '#4e69a2',borderColor: '#c6c7ca',color: '#5890ff' } }; 我们使用内联样式来渲染 <div style={styles.container}> 内联样式并没有那么糟糕。 前五个问题顺利解决。 定制化/* 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服务面临的困境,去思考、讨论并解决。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |