React
出现以后，这个原则不再适用了。因为，React 是组件结构，强制要求把 HTML、CSS、JavaScript 写在一起。
上面的例子使用 React 改写如下（查看
完整代码
）。
const style = {
'color': 'red',
'fontSize': '46px'
const clickHandler = () => alert('hi');
ReactDOM.render(
<h1 style={style} onclick={clickHandler}>
Hello, world!
</h1>,
document.getElementById('example')
上面代码在一个文件里面，封装了结构、样式和逻辑，完全违背了"关注点分离"的原则，很多人不适应。
但是，这有利于组件的隔离。每个组件包含了所有需要用到的代码，不依赖外部，组件之间没有耦合，很方便复用。所以，随着 React 的走红和组件模式深入人心，这种"关注点混合"的新写法逐渐成为主流。
表面上，React 的写法是 HTML、CSS、JavaScript 混合在一起。但是，实际上不是。现在其实是用 JavaScript 在写 HTML 和 CSS。
React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装，我们通过封装去操作 HTML 和 CSS。也就是说，网页的结构和样式都通过 JavaScript 操作。
React 对 HTML 的封装是
JSX 语言
，这个在各种 React 教程都有详细介绍，本文不再涉及了，下面来看 React 对 CSS 的封装。
React 对 CSS 封装非常简单，就是沿用了 DOM 的
style 属性对象
，这个在前面已经看到过了。
const style = {
'color': 'red',
'fontSize': '46px'
上面代码中，CSS 的
font-size
属性要写成
fontSize
，这是 JavaScript 操作 CSS 属性的
约定
。
由于 CSS 的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作。它们统称为 CSS in JS，意思就是使用 JS 语言写 CSS。根据不完全统计，各种 CSS in JS 的库至少有
47种
。老实说，现在也看不出来，哪一个库会变成主流。
你可能会问，它们与"CSS 预处理器"（比如 Less 和
Sass
，包括 PostCSS）有什么区别？回答是 CSS in JS 使用 JavaScript 的语法，是 JavaScript 脚本的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤。
上周，我看到一个新的 CSS in JS 库，叫做
polished.js
。它将一些常用的 CSS 属性封装成函数，用起来非常方便，充分体现使用 JavaScript 语言写 CSS 的优势。
我觉得这个库很值得推荐，这篇文章的主要目的，就是想从这个库来看怎么使用 CSS in JS。
首先，加载 polished.js。
const polished = require('polished');
如果是浏览器，插入下面的脚本。
<script src="https://unpkg.com/
[email protected]
/dist/polished.min.js">
</script>
polished.js
目前有50多个方法，比如
clearfix
方法用来清理浮动。
const styles = {
...polished.clearFix(),
上面代码中，
clearFix
就是一个普通的 JavaScript 函数，返回一个对象。
polished.clearFix()
// &::after: {
// clear: "both",
// content: "",
// display: "table"
// }
"展开运算符"（
...
）将
clearFix
返回的对象展开，便于与其他 CSS 属性混合。然后，将样式对象赋给 React 组件的
style
属性，这个组件就能清理浮动了。
ReactDOM.render(
<h1 style={style}>Hello, React!</h1>,
document.getElementById('example')
从这个例子，大家应该能够体会
polished.js
的用法。
下面再看几个很有用的函数。
ellipsis
将超过指定长度的文本，使用省略号替代（查看
完整代码
）。
const styles = {
...polished.ellipsis('200px')
// 返回值
// 'display': 'inline-block',
// 'max-width': '250px',
// 'overflow': 'hidden',
// 'text-overflow': 'ellipsis',
// 'white-space': 'nowrap',
// 'word-wrap': 'normal'
hideText
用于隐藏文本，显示图片。
const styles = {
'background-image': 'url(logo.png)',
...polished.hideText(),
// 返回值
'background-image': 'url(logo.png)',
'text-indent': '101%',
'overflow': 'hidden',
'white-space': 'nowrap',
hiDPI
指定高分屏样式。
const styles = {
[polished.hiDPI(1.5)]: {
width: '200px',
// 返回值
//'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
// only screen and (min--moz-device-pixel-ratio: 1.5),
// only screen and (-o-min-device-pixel-ratio: 1.5/1),
// only screen and (min-resolution: 144dpi),
// only screen and (min-resolution: 1.5dppx)': {
// 'width': '200px',
retinaImage
为高分屏和低分屏设置不同的背景图。
const styles = {
...polished.retinaImage('my-img')
// 返回值
// backgroundImage: 'url(my-img.png)',
// '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
// only screen and (min--moz-device-pixel-ratio: 1.3),
// only screen and (-o-min-device-pixel-ratio: 1.3/1),
// only screen and (min-resolution: 144dpi),
// only screen and (min-resolution: 1.5dppx)': {
// backgroundImage: 'url(my-img_2x.png)',
// }
polished.js
提供的其他方法如下，详细用法请参考
文档
。
normalize()
：样式表初始化
placeholder()
：对 placeholder 伪元素设置样式
selection()
：对 selection 伪元素设置样式
darken()
：调节颜色深浅
lighten()
：调节颜色深浅
desaturate()
：降低颜色的饱和度
saturate()
：增加颜色的饱和度
opacify()
：调节透明度
complement()
：返回互补色
grayscale()
：将一个颜色转为灰度
rgb()
：指定红、绿、蓝三个值，返回一个颜色
rgba()
：指定红、绿、蓝和透明度四个值，返回一个颜色
hsl()
：指定色调、饱和度和亮度三个值，返回一个颜色
hsla()
：指定色调、饱和度、亮度和透明度三个值，返回一个颜色
mix()
：混合两种颜色
em()
：将像素转为 em
rem()
：将像素转为 rem
目前，
polished.js
只是1.0版，以后应该会有越来越多的方法。
polished.js
还有一个特色：所有函数默认都是柯里化的，因此可以进行函数组合运算，定制出自己想要的函数。
import { compose } from 'ramda';
import { lighten, desaturate } from 'polished';
const tone = compose(lighten(10), desaturate(10))
上面代码使用 Ramda 函数库完成组合运算。Ramda 的用法可以参考我写的
教程
。
（正文完）
==========
最后，发布一个活动消息。
大家知道，美国最大之一的在线教育网站优达学城（Udacity），一直赞助我的博客。他们正在国内推广
深度学习课程（中英双语）
，有一系列的配套活动。
4月6日晚上8点，他们邀请
深度好奇公司
（ DeeplyCurious.ai ）的创始人兼 CTO 吕正东博士，举办一场
知乎 Live
，探讨深度学习和语言智能，感兴趣的朋友不要错过。
【主讲人】
吕正东博士，曾任职于微软亚洲研究院、华为诺亚方舟实验室等著名研究机构，长期从事机器学习及人工智能的研究，在深度学习、自然语言处理和半监督学习等领域卓有建树，是深度学习领域（尤其是自然语言处理方向）具有世界顶尖水平并享有国际声誉的科学家和技术专家。
【活动内容】
深度学习在自然语言处理方面的新进展
深度学习是否会主导自然语言处理
自然语言处理和人工智能的下一个大事件
我为什么创立深度好奇
自由提问时间
4月6日晚上8点
知乎 Live
polished.js 返回的是 "max-width" 这种形式的
直接用在 React 的 style 上面会报
`Warning: Unsupported style property max-width. Did you mean maxWidth`
有配置或者转换的方法吗？
2017年那么多人反对 css-in-js ，但是现在 material-ui 就把 css-in-js 运用得很好。
css-in-js 使得样式不在是预先设置，可以动态改变，自定义主题变成了修改一个 js 变量，而不再是消除旧主题的样式，引入新主题的样式，页面风格高度可定制化。自定义生成页面使用 css-in-js 做为样式支持，会使程序变得异常简单。
css-in-js 目前有两点不足：一是增加渲染负担，不过基本上是毫秒级别，其逻辑不过是遍历 css-in-js 对象然后转换为字符串插入到 style 元素内而已；二是语法提醒，这点虽然 typescript 可以一定程度上的弥补，不过比起 css、sass、less 等文件的语法提醒来说，较为鸡肋。
css-in-js 国内不温不火，我猜原因有下：国内钟爱 vue ，而 vue 相关 ui 库并没有对 css-in-js 有很好的支持；css-in-js 库太多，没有较为突出权威的库，这是因为 css-in-js 实现简单，迭代也更加迅速；css-in-js 门槛较高，学完 css 可以直接学习 sass、less 并且没有压力，但是 css-in-js 需要再学习 js，还要考虑和当前框架的兼容性，能不能很好嵌入等等问题。
