polished css,CSS in JS

Posted 2022-12-16 weixin_39685459

在之前的网站有一个开发原则是‘关注点分离’，这个技术的意思是，各个技术都只是负责自己的领域，不会混合在一起，形成耦合，而对于前端的开发来说，就是javascript、html、CSS的解耦。

关注点分离

对于前端开发人员，这三个概念并不陌生，那我们最后澄清一下他们各自担任的角色。

HTML语言：负责网页的构建任务，又被称为语义层

-CSS语言：负责网页的样式。又被称为视觉层

JavaScript语言：负责网页的逻辑与交互，又被称为逻辑层和交互层

也就是说不要写内部样式和行内脚本。

但是在React出现之后，这个原则就不再适用了，React是组件结构，强制的把JavaScript、HTML、CSS写在了一起。那我们下面看一下关于React的代码

const style =

'color': 'red',

'fontSize': '46px'

;

const clickHandler = () => alert('hi');

ReactDOM.render(

Hello, world!

,

document.getElementById('example')

);

上面的一段代码包含了JavaScript、HTML、CSS的代码，一个文件中中封装了结构、样式、逻辑，完全违背了‘关注点分离’的原则。

但是这么写，有助于组件的隔离，每一个组件都包含了要用到的所有的代码，不用依赖于外部，组件和组件之间不存在耦合关系，很方便被复用，所以我们要是使用React的话，这样的写法会渐渐的称为主流的写法。

组件的封装

我们如果简单的从结构上面看，React写法好像是将JavaScript、HTML、CSS混合的写到了一起。但是实际上并不是这样的，其实实现的方式是用JavaScript来写HTML、CSS。React在JavaScript里面实现了对HTML和CSS的封装，我们是通过封装来操作HTML和CSS，也就是网页的结构、样式、逻辑都是通过JavaScript来实现的。

其中react对HTML的封装是JSX语言，ReactJs基础语法有进行详细的讲述，那么我们看一下啊我们是怎么实现对CSS的封装的，对于React来说，对CSS的封装，就是沿用了DOM的style的属性。

const style =

'color': 'red',

'fontSize': '46px'

;

在上面的代码中CSS的font-size属性要写成fontsize，这是JavaScript操作CSS属性的约定，这个约定在链接里面可以详细看到。

由于CSS的封装非常弱，所以导致网上出现了一些列的第三方的库，用来加强React的CSS的操作，这些第三方的库被统称为CSS in JS，表达的意思就是用JavaScript来写CSS。现在在网上流传的CSS in JS就有47种。

有很多人会问这些库和‘CSS预处理器’(sass,less)有什么区别呢？

答案：CSS in JS使用的是JavaScript的语法，是JavaScript脚本的一部分，不需要从头学习一套专有的API，不需要再进行一次编译步骤。

那我们现在看一个CSS in JS库，叫做 polished.js，这个库将一些常见的CSS属性封装成函数，用起来比较方便，充分的体现了JavaScript 语言写CSS 的优势。

首先先进行加载polished.js。

const polished = require('polished');

//如果是浏览器我们可以插入下面的脚本

polished.js目前有50多个方法，比如clearfix方法用来清理浮动。

const styles =

...polished.clearFix(),

;

上面代码中，clearFix就是一个普通的JavaScript 函数，返回一个对象。

polished.clearFix()

// 返回值

//

// &::after:

// clear: "both",

// content: "",

// display: "table"

//

//

现在我们look几个简单实用的函数。

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[用法](https://polished.js.org/docs/)主要提供的其他方法如下：

normalize()：样式表初始化

placeholder()：对 placeholder 伪元素设置样式

selection()：对 selection 伪元素设置样式

darken()：调节颜色深浅

lighten()：调节颜色深浅

desaturate()：降低颜色的饱和度

saturate()：增加颜色的饱和度

opacify()：调节透明度

complement()：返回互补色

grayscale()：将一个颜色转为灰度

rgb()：指定红、绿、蓝三个值，返回一个颜色

rgba()：指定红、绿、蓝和透明度四个值，返回一个颜色

hsl()：指定色调、饱和度和亮度三个值，返回一个颜色

hsla()：指定色调、饱和度、亮度和透明度三个值，返回一个颜色

mix()：混合两种颜色

em()：将像素转为 em

rem()：将像素转为 rem

polished.js还有一个特色：所有函数默认都是柯里化的，因此可以进行函数组合运算，定制出自己想要的函数

import compose from 'ramda';

import lighten, desaturate from 'polished';

const tone = compose(lighten(10), desaturate(10))