"There are only two hard things in Computer Science: cache invalidation and naming things" - Phil Karlton

我们这一章其实都是在围绕着解决"naming things"这个问题。why?因为CSS不支持变量作用域啊😂😂😂😂😂😂

普通CSS

可以直接在jsx文件import css文件, 然后在component上写上className就可以了。注意这里是className而不是class,因为class是js的关键字。

import './styleA.css'

<MyComponentA className="red" />
.red {
  color: red;
  background-color: green;
}

用这种方式,最大的好处就是跟原来没有太大区别, 还是直接写css,代码迁移成本最低。但是跟原来一样, 同样没办法解决命名冲突的问题。比如还有一个componentB,如下:

import './styleB.css'

<MyComponentB className="red" />
.red {
  color: red;
  background-color: white;
}

那么两个css文件, 由于className都是.red,则会产生冲突,至于具体background-color最后会是白色还是绿色,则取决于两个组件的出现顺序,总之不会是你想要的结果。

React内联样式

React可以直接在component上写样式,属性是style,但是值必须值一个对象,且要用驼峰格式,如下:

<div style={{color: "red", backgroundColor: "green"}}>react inline style</div>

很多人一开始会觉得奇怪,为什么是两个大括号{{}}呢?注意本身props传属性的时候,如果是javascript值的话就要用{}包起来,然后因为里面的样式本身是javascript object,所以还有一层{}。代码改成如下形式就一目了然了:

cosnt myStyle = {color: "red", backgroundColor: "green"}
<div style={myStyle}>react inline style</div>

最后生成的html如下:

<div style="color: red; background-color: green;">react inline style</div>

inline样式不存在样式命名冲突的问题,但是inline style有自己的问题,比如大家都知道的代码重复啊,没法缓存啊等等。

CSS modules

css modulesGlen Maddern开发的一套工具,用于解决css样式冲突问题,目前也很是流行。Glen Maddern在他的blog上详细介绍了css modules的好处和设计理念, 有兴趣的可以看看。

Css in JS

自从2014年Christopher Chedeau做了CSS in JS的演讲之后, cssinjs的各种库纷纷出现,已经有好几十种了

这有一篇Material UI的一位作者讲他们如何在各种cssinjs中做的选型,介绍对比了各种cssinjs库的一些特性,大家可以了解一下, 这里是PPT

Styled Components

css modules应该是很流行的了, 说实话我没有用过, 不过在浏览作者主页的时候意外发现了styled-components,发现这才是我真正想要的!大家可以看看下面几个视频,先有个大概印象。

styled-components作者Max Stoiber在2017年React大会上的演讲:

css modules作者@glenmaddern在2017年欧洲CSS大会上分享styled-components

css modules作者@glenmaddern分享styled-components, 玩得很high啊。

经过对比,我发现styled-components的几大特点极好地满足我的需求,包括:

  1. pure css: 支持完全的CSS(包括动画、伪元素以及媒体查询等),写法也是CSS本身
  2. 支持根据条件(props)设置样式,支持主题
  3. 支持服务端渲染,配合静态生成工具(比如Gatsby),简直完美
  4. 支持React Native

    Glen Maddern本人也参与了styled-components的核心开发工作,由此也可以作为一个考量依据,建议大家选择styled-components

总结

由于CSS本身不支持命名作用域(或者说只有一个global作用域),因此很容易出现命名冲突。出现的很多技术都是为了解决命名冲突的问题。本章简要介绍了用普通的CSS,React inline style,css modules, styled-components等方法以及存在的问题,这里推荐一篇讲CSS各种技术发展的blog,大家有兴趣的可以看看。还有一个github repo对各种方法进行了对比,这个repo是styled-components提供的,也就是接下来我们要讲的重点。

Refers

results matching ""

    No results matching ""