如果你用組件化的前端方案，比如React這種，那么毫無疑問，css in js方案要比傳統的css方案要好。

css in js 有兩點不可撼動的優越性。

1. 你不需要再為命名的css的 class name而思考了。傳統的css方案，因為class name是全局的，你就要保證它的唯一性，你要把你的組件名等各種namespace作為class name的前綴，以保證唯一性。css in js主要是解決了這一點。

2. css直接使用js的變量。css是不能定義變量的，如果你使用less或者sass，確實可以定義變量，但那主要是為了共享，是沒有辦法使用js的變量的。這一點問題不大，不用js變量也能寫的好好的，只是稍微麻煩一點。

從第一點出發，看看我所希望css in js是什么樣的。然后再去看styled-component， emotion和jss是怎么做的，最后再去評價。

// button.css
.my-button {
  background-color: withe;
}

import './button.css'
const App = props => {
  return <div css="my-button"></div>
}

首先是一個css樣式，和正常的css一樣。然后用的時候把css的class name放到css（或者其他一個property）里面。渲染的結果里面并不包含my-button，而是一個生成的唯一的class name。

這種寫法用法上和傳統的css寫法基本一樣。

當然這只是我期待的css in js，應該是不存在這種開源代碼的。理論上能不能實現我也不清楚，能想到的是寫個babel loader去搞，但是對babel loader具體的職責我并不懂。

前面說了，這只是基于第一點而期待的，如果再加上第二點，那么簡單這么做是不行的，因為上面本質上還是用的css樣式，沒辦法吧把js變量放進去。

styled-component的做法：

const Button = styled.div`
  background-color: white;
`
const App = props => {
  return <Button />
}

應該說這個腦洞非常大，直接把css作為了一個組件，而不是一個屬性（className，style，css等等）。

emotion的做法：

const App = props => {
  return <div className={css`
    background-color: white;
    `}></div>
}

這其實就是在代替內聯樣式。

或者這樣：

const App = props => {
  return <div css={{backgroundColor: 'white'}}></div>
}

而如果你用react自帶的話，只是把上面的css換成style

const App = props => {
  return <div style={{backgroundColor: 'white'}}></div>
}

當然渲染結果是有區別的，react自帶的是內聯樣式，emotion渲染的是class 樣式。

可以猜出來，emotion的初衷就是為了消滅內聯樣式。

jss的做法

const useStyles = createUseStyles({
  backgroundColor: 'white',
})
const App = props => {
  const { backgroundColor } = useStyles();
  return <div className={backgroundColor}></div>
}

和emotion的css方案差不多，具體樣式都是用的js語法（backgroundColor: 'white',），而不是css語法（background-color: white;）。

區別是官方樣例的傾向問題。jss更傾向于把一個組件內的所有css作為一個整體（當然你也可以分成多個useStyles）。

事實上jss和emotion用法基本是一樣的，你用emotion同樣可以把組件的css作為一個整體去定義。

我自己的傾向

styled-component是反人類的設計。原因是它會造成Component的混亂不堪，代碼難以閱讀，至少在react中用是這樣。你沒有辦法非常容易的區分一個styled component和正常的Component，這樣在讀代碼的時候就要思考它到底是什么。

emotion和jss上面分析了，區別不大。jss好像不支持css的語法方案？（事實上比較流行的幾個css in js方案基本都是互通的。象jss和emotion都可以象styled-component那樣去寫）。

只是jss的文檔更好一點。emotion的文檔是匪夷所思的，把代碼象內聯樣式一樣去寫？？？WTF！

總結

以上是生活随笔為你收集整理的styled-component, emotion and jss 对比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。