（点选下方社会公众号，可加速高度关注）
译者：阮志成
www.ruanyifeng.com/blog/2017/04/css_in_js.html
1、从前，页面合作开发有两个准则，叫作“着眼点分立”（separation of concerns）。
它的原意是，各式各样控制技术只负责管理他们的应用领域，千万别混和在一同，逐步形成谐振。对页面合作开发而言，主要就是四种控制技术分立。
HTML 词汇：负责管理页面的内部结构，又称为语法层
CSS 词汇：负责管理页面的式样，又称为听觉层
JavaScript 词汇：负责管理页面的方法论和可视化，又称为方法论层或可视化层
单纯说，是一句话，千万别写”Lembron式样”（inline style）和”LembronJAVA”（inline script）。比如说，上面标识符就很差劲（查阅完备标识符）。
<h1 style=“color:red;font-size:46px;”onclick=“alert(Hi)”>
Hello World
</h1>
2、React 出现以后，这个准则不再适用了。因为，React 是组件内部结构，强制要求把 HTML、CSS、JavaScript 写在一同。
上面的例子使用 React 改写如下（查阅完备标识符）。
conststyle = {
color: red,
fontSize: 46px
};
constclickHandler = () => alert(hi);
ReactDOM.render(
<h1 style={style}onclick={clickHandler}>
Hello,world!
</h1>,
document.getElementById(example)
);
上面标识符在两个文件里面，封装了内部结构、式样和方法论，完全违背了”着眼点分立”的原则，很多人不适应。
但是，这有利于组件的隔离。每个组件包含了所有需要用到的标识符，不依赖外部，组件之间没有谐振，很方便复用。所以，随着 React 的走红和组件模式深入人心，这种”着眼点混和”的新写法逐渐成为主流。
3、表面上，React 的写法是 HTML、CSS、JavaScript 混和在一同。但是，实际上不是。现在其实是用 JavaScript 在写 HTML 和 CSS。
React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装，我们通过封装去操作 HTML 和 CSS。也是说，页面的内部结构和式样都通过 JavaScript 操作。
4、React 对 HTML 的封装是 JSX 词汇 ，这个在各式各样 React 教程都有详细介绍，本文不再涉及了，上面来看 React 对 CSS 的封装。
React 对 CSS 封装非常单纯，是沿用了 DOM 的 style 属性对象，这个在前面已经看到过了。
conststyle = {
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 JAVA的一部分，不用从头学习一套专用的 API，也不会多一道编译步骤。
5、上周，我看到两个新的 CSS in JS 库，叫作 polished.js。它将一些常用的 CSS 属性封装成函数，用起来非常方便，充分体现使用 JavaScript 词汇写 CSS 的优势。
我觉得这个库很值得推荐，这篇文章的主要就目的，是想从这个库来看怎么使用 CSS in JS。
首先，加载 polished.js。
const polished = require(polished);
如果是浏览器，插入上面的JAVA。
<script src=“https://unpkg.com/[email protected]/dist/polished.min.js”>
</script>
polished.js目前有50多个方法，比如说clearfix方法用来清理浮动。
conststyles = {
…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的用法。
6、上面再看几个很有用的函数。
ellipsis将超过指定长度的文本，使用省略号替代（查阅完备标识符）。
conststyles = {
…polished.ellipsis(200px)
}
// 返回值
// {
// display: inline-block,
// max-width: 250px,
// overflow: hidden,
// text-overflow: ellipsis,
// white-space: nowrap,
// word-wrap: normal
// }
hideText用于隐藏文本，显示图片。
conststyles = {
background-image: url(logo.png),
…polished.hideText(),
};
// 返回值
// {
background-image: url(logo.png),
text-indent: 101%,
overflow: hidden,
white-space: nowrap,
}
hiDPI指定高分屏式样。
conststyles = {
[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为高分屏和低分屏设置不同的背景图。
conststyles = {
…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),
// }
7、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版，以后应该会有越来越多的方法。
8、polished.js还有两个特色：所有函数默认都是柯里化的，因此可以进行函数组合运算，定制出他们想要的函数。
import{compose}fromramda;
import{lighten,desaturate}frompolished;
consttone = compose(lighten(10),desaturate(10))
上面标识符使用 Ramda 函数库完成组合运算。Ramda 的用法可以参考我写的教程。
觉得本文对你有帮助？请分享给更多人
高度关注「前端大全」，提升前端技能
