CSS-in-JS之React-Emotion

先聊聊 HTML-in-JS之JSX:

我在初次接触 JSX 时,对其将 HTML 和 JS 耦合在一起的方式完全不能接受。
我深深地认为 Web 开发能迅速流行且已20多年还保持强壮生命力的原因,与其 HTML / CSS / JS三者间松耦合的简单设计有很大关系。
而 JSX 完全抛弃了这种设计,让代码乍看之下非常丑陋...

但转念一想,React 能这么火,可定有原因,我就耐住这非常不好的第一印象继续学习它...

随着深入,我了解到 JSX 解决了前端开发的一个巨大痛点:通过 JSX 能轻松将「数据与 UI 保持同步」
过去,我们想将请求到的数据挂载到 HTML 上要写大量的 JS 代码操作 DOM 接口,而且这些代码量大且复用性差。
而在 JSX 中,就不存在 JS 操作 DOM 了,因为 HTML 就是 JS 的一部分,JS的灵活性能在 HTML 上完美体现!
从这层意义上看,使用 JSX 的 React 很像 Web 开发语言的升级版,而不仅仅是一个框架。

下面,要介绍的 emotion 即是 JSX 思路的 CSS 实现,即将 JS 的灵活性应用到 CSS 上。

我对 emotion 的了解始于下图的 demo: (代码)

其主题有 light 和 dark 两种

上面的 Demo 通过 <Button /> 很容易地将整个 App 在两种 Style 间切换。

React-Emotion 使得我们可以通过操作 React 的 props 操作 CSS:

const H1 = styled('h1')(
  {
    fontSize: '24px',
    fontWeight: 'lighter'
  },
  props => ({ color: props.color || '#333' })
)

如上,我们便以<h1> "wrap" 了一个 <H1> 组件,且可通过 <H1 color="red"> 的方式设置标签的 color 。

PS:Emotion 还有很多其他很好的操作方式,因为用法非常简单,且官网的介绍非常详细,所以本文不对其用法做详细介绍。

推荐阅读更多精彩内容

  • 0. 写在前面 当你开始工作时,你不是在给你自己写代码,而是为后来人写代码。 —— Nichloas C. Zak...
    康斌阅读 4,136评论 1 41
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 22,974评论 1 45
  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 5,279评论 0 16
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,908评论 1 91
  • 妈妈从老家过来帮我带了几天小孩,昨晚她在小区门口下车去买馒头,我带孩子先回家了。然后,过了好久好久,老妈才回来,说...
    aimeelala阅读 187评论 4 0