css简单-CSSinJS 简介

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1.过去，Web开发有一个原则，叫做“关注点分离”。

意味着各种技术只负责自己的领域，不应该混合在一起产生耦合。 对于Web开发来说，主要存在三种技术分离。

简单来说，就是一句话，不要写“内联样式”（inlinestyle）和“内联脚本”（inlinescript）。 例如，下面的代码很糟糕（请参阅完整代码）。

style="color:red;font-size:46px;"onclick="alert('Hi')">

你好世界

2、React出现之后，这个原则就不再适用了。 因为 React 是组件结构css简单，所以必须将 HTML、CSS 和 JavaScript 一起编写。

里面的例子用React重写如下（看完整代码）。

常量样式={

'红色'，

'字体大小': '46px'

};

constclickHandler=()=>alert('hi');

ReactDOM。 使成为（

你好世界！

文档。 getElementById('示例')

）；

里面的代码在一个文件上，封装了结构、风格和逻辑，完全违背了“关注点分离”的原则，很多人不习惯。

然而，这有利于组件的隔离。 每个组件包含了所有需要使用的代码，不依赖于外部，组件之间没有耦合，易于复用。 因此，随着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属性对象，上面已经听过。

常量样式={

'红色'，

'字体大小': '46px'

};

里面的代码中，CSS的font-size属性应该写成fontSize，这是JavaScript操作CSS属性的约定。

由于CSS的封装性很弱，因此创建了一系列第三方库来加强React的CSS操作。 它们统称为CSSinJS，意思是用JS语言编写CSS。 据不完全统计，CSSinJS库至少有47种。 说实话，我现在看不出哪个库会成为主流。

您可能会问，它们与 Less 和 Sass（包括 PostCSS）等“CSS 预处理器”有何不同？ 答案是CSSinJS使用JavaScript语法，它是JavaScript脚本的一部分。 不需要从头开始学习专用的APIcss简单，也不会有额外的编译步骤。

5. 上周，我看到了一个新的 CSSinJS 库，名为 Polish.js。 它将一些常用的CSS属性封装成函数，使用起来非常方便，充分展现了使用JavaScript语言编写CSS的优势。

我觉得这个库值得推荐。 本文的主要目的是了解如何使用该库中的 CSSinJS。

首先，加载 Polished.js。

constpolish = require('抛光');

如果是浏览器，则插入下面的脚本。

Polished.js目前有50多个方法，比如清除浮动的clearfix方法。

常量样式={

...抛光。 清除修复(),

};

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

抛光。 清除修复()

//{

//＆：：后：{

//明确：“两者”，

//内容： ””，

//显示：“表”

//}

//}

“展开运算符”(...) 展开由clearFix 返回的对象，以便与其他 CSS 属性混合。 之后，将样式对象赋值给React组件的style属性，该组件就可以清除浮动了。

ReactDOM。 使成为（

你好，反应！，

文档。 getElementById('示例')

）；

从这个反例中，你应该能够感受到polish.js的用法了。

6. 让我们看一下一些更有用的功能。

省略号将用省略号替换超出指定宽度的文本（请参阅完整代码）。

常量样式={

...polish.ellipsis('200px')

//返回值

//{

//'显示':'内联块',

//'最大宽度':'250px',

//'溢出':'隐藏',

//'文本溢出':'省略号',

//'white-space':'nowrap',

//'自动换行':'正常'

//}

hideText用于隐藏文本和显示图片。

常量样式={

'背景图片': 'url(logo.png)',

...polish.hideText(),

};

//返回值

//{

'背景图片': 'url(logo.png)',

'文本缩进': '101%',

'溢出': '隐藏',

'空白'：'nowrap'，

hiDPI 指定高分辨率屏幕样式。

常量样式={

[抛光.hiDPI(1.5)]:{

宽度：'200px'，

};

//返回值

//'@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5),

//onlyscreenand(min--moz-device-pixel-ratio:1.5),

//onlyscreenand(-o-min-device-pixel-ratio:1.5/1),

//onlyscreenand(最小分辨率:144dpi),

//onlyscreenand(最小分辨率:1.5dppx)':{

//'宽度':'200px',

//}

retinaImage 为高分辨率屏幕和低分辨率屏幕设置不同的背景图像。

常量样式={

...抛光。 retinaImage('我的-img')

};

//返回值

//背景图片:'url(my-img.png)',

//'@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.3),

//onlyscreenand(min--moz-device-pixel-ratio:1.3),

//onlyscreenand(-o-min-device-pixel-ratio:1.3/1),

//onlyscreenand(最小分辨率:144dpi),

//onlyscreenand(最小分辨率:1.5dppx)':{

//背景图片:'url(my-img_2x.png)',

//}

7. Polished.js提供的其他方法如下，详细使用方法请参考文档。

目前， Polished.js 只有 1.0 版本，未来应该会有越来越多的方式。

8. Polished.js还有一个特点：默认所有函数都是柯里化的，这样你就可以进行函数组合操作，自定义你想要的函数。

导入{compose}from'ramda';

从“抛光”导入{亮化、去饱和}；

consttone=compose(变亮(10), 去饱和(10))

里面的代码使用Ramda函数库来完成组合操作。 Ramda的使用可以参考我写的教程。