CSS in JS

1、以前,网页开发有一个原则,叫做“关注点分离”(separation of concerns)。

它的意思是,各种技术只负责自己的领域,不要混合在一起,形成耦合。对于网页开发来说,主要是三种技术分离。

  • HTML 语言:负责网页的结构,又称语义层
  • CSS 语言:负责网页的样式,又称视觉层
  • JavaScript 语言:负责网页的逻辑和交互,又称逻辑层或交互层

简单说,就是一句话,不要写”行内样式”(inline style)和”行内脚本”(inline script)。比如,下面代码就很糟糕(查看完整代码)。

<h1 style="color:red;font-size:46px;"  onclick="alert('Hi')">
  Hello World
</h1>

2、

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 的走红和组件模式深入人心,这种”关注点混合”的新写法逐渐成为主流。

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 属性对象,这个在前面已经看到过了。

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,也不会多一道编译步骤。

5、

上周,我看到一个新的 CSS in JS 库,叫做 polished.js。它将一些常用的 CSS 属性封装成函数,用起来非常方便,充分体现使用 JavaScript 语言写 CSS 的优势。

我觉得这个库很值得推荐,这篇文章的主要目的,就是想从这个库来看怎么使用 CSS in JS。

首先,加载 polished.js。

const polished = require('polished');

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

<script src="https://unpkg.com/polished@1.0.0/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的用法。

6、

下面再看几个很有用的函数。

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)',
//  }

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 } from 'ramda';
import { lighten, desaturate } from 'polished';

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

上面代码使用 Ramda 函数库完成组合运算。Ramda 的用法可以参考我写的教程

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 判断用户是否断网navigator.onLine

    Navigator onLine 属性 onLine 属性是一个只读的布尔值,声明了系统是否处于脱机模式,如果系统属于脱机状态,则返回 false,否则返回 ...

    javascript.shop
  • escape() VS encodeURI() VS encodeURIComponent()的区别

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unes...

    javascript.shop
  • CSS中的@关键字

    大家可能在CSS中见到过字符@然后加一些关键字的用法,这种用法就称之为AT规则,在CSS中,种类还是很多的,这里总结列举下。

    javascript.shop
  • CSS in JS 简介

    1、 以前,网页开发有一个原则,叫做"关注点分离"(separation of concerns)。 ? 它的意思是,各种技术只负责自己的领域,不要混合在一起,...

    ruanyf
  • 【死磕Java并发】-----J.U.C之阻塞队列:PriorityBlockingQueue

    我们知道线程Thread可以调用setPriority(int newPriority)来设置优先级的,线程优先级高的线程先执行,优先级低的后执行。而前面介绍的...

    用户1655470
  • 使用机器学习算法打造一个简单的“微博指数”

    写这篇文章的契机,是我在某天看完腾讯指数的推送后,突发奇想,想自己实现类似这样的一个东西,感觉蛮好玩的。然后就在上周末,利用了一些空余时间,写了一个简单的舆情监...

    林浩威
  • PHP数据结构(六) ——数组的相乘、广义表

    PHP数据结构(六)——数组的相乘、广义表 (原创内容,转载请注明来源,谢谢) 本文接PHP数据结构(五)的内容。 4.2 行逻辑链接的顺序表 行逻辑链接的顺...

    用户1327360
  • Fashion-MNIST 一周年 | Google NIPS最爱,还登上了Science

    ? 导语:本文回顾了Fashion-MNIST发布后的一年里在人工智能/机器学习学术圈和社区中所取得的进展。该数据集的初衷是替代MNIST,为机器学习提供一个...

    腾讯技术工程官方号
  • 编程珠玑II C12笔记: rand num generator

    刘笑江
  • O2O又下一城:医疗零售

    日前,支付宝与海王星辰达成战略合作,首批杭州、深圳两地的所有门店将接入条码支付,支持支付宝付款,3月全国2000余家门店将全部覆盖。这是国内互联网巨头移动支付...

    罗超频道

扫码关注云+社区

领取腾讯云代金券