Why We're Breaking Up with CSS-in-JS？

故事的开头

最近Ant-Design有升级到V5，还有MUI也是升级到了V5.

两者都有一些重大更新，其实MUI最大的更新是将JSS升级到了emotion(optional)

而Ant-Design为了更好的支持动态主题，是抛弃了LESS,全面转向了CSS IN JS

emotion介绍：https://emotion.sh/docs/introduction

emotion也是一种css in js 的库，可以一起来看看它的用法

import { css } from '@emotion/react'

const color = 'white'

render(
  <div
    css={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

还有一种stlyed的写法：

import styled from '@emotion/styled'

const Button = styled.button`
  padding: 32px;
  background-color: hotpink;
  font-size: 24px;
  border-radius: 4px;
  color: black;
  font-weight: bold;
  &:hover {
    color: white;
  }
`

render(<Button>This my button component.</Button>)

Ant-Design则是使用 @ant-design/cssinjs 作为解决方案

---

两个比较受欢迎的 React UI组件库都使用了CSS IN JS ，那么可以说明这个技术已经比较成熟了。根据项目实际情况需要，可以考虑是否加入到项目中

我们看待一个问题/技术，应该要有不同的视角，不仅仅要看到它的好，还要看到它的不好。这样才能客观全面的认识它

在国外有一位Sam Magura的小哥写了一篇文章:Why We're Breaking Up with CSS-in-JS

我强烈建议大家去看他的英文原文（包括其他学习资料，也尽量看英文原版的。程序员的英语越好，获取到核心第一手学习资料的概率越大）

我这里总结他的几个核心观点：

• 什么是css in js ?

CSS in js允许你直接在JavaScript或TypeScript代码中编写CSS来设置React组件的样式

例如:

// @emotion/react (css prop), with object styles
function ErrorMessage({ children }) {
  return (
    <div
      css={{
        color: 'red',
        fontWeight: 'bold',
      }}
    >
      {children}
    </div>
  );
}

// styled-components or @emotion/styled, with string styles
const ErrorMessage = styled.div`
  color: red;
  font-weight: bold;
`;

好的点：

１.css in js 自带局部作用域，纯粹的css写的代码都是天然全局作用域，虽然也可以通过其他手段做到局部作用域，但是css in js 是自带的

2.Colocation - 代码的一种更好的方法是将与单个组件相关的所有内容包含在同一位置。这种做法被称为colocation,css in js 可以天然的做到这一点，但是如果是传统写法，CSS和components组件会分离在不同的文件夹（但是我认为传统写法也可以做到，只是需要一些手段）

3.可以使用JS的常量在css in js中，例如：

// colors.ts
export const colors = {
  primary: '#0d6efd',
  border: '#ddd',
  /* ... */
};

// MyComponent.tsx
function MyComponent({ fontSize }) {
  return (
    <p
      css={{
        color: colors.primary,
        fontSize,
        border: `1px solid ${colors.border}`,
      }}
    >
      ...
    </p>
  );
}

这样可以避免一个常量既定义在JS中，也定义在CSS中

中立的

这是热门的新技术  - 前端有一批人非常热衷追求新技术（这也是我的观点）

不好的点

1. css in js 增加了运行时的开销，当你的组件呈现时，CSS-in- js库必须将你的样式“序列化”为可以插入到文档中的普通CSS

2.CSS-in-JS会增加你的包的大小

3.CSS-in-JS使React DevTools变得混乱,例如会增加很多层级

丑陋的点

1.频繁地插入CSS规则会迫使浏览器做很多额外的工作

2.使用CSS-in-JS，可能会出现更多错误，特别是在使用SSR和/或组件库时（但是我看emotion - mui v5版本中已经有一些解决方案了）

性能大幅下降 - Performance Deep Dive

这块的内容建议看原文更爽，这里就不翻译了。

结论

综上所述，使用CSS IN JS 会带来一些不可避免的性能损耗，还有就是对开发编码模式的一些行为习惯改变，能否对团队带来提效，以及产品力竞争的提升等等，基于这些点去考虑你是否要使用CSS IN JS在项目中。

在MUI和ANTD这种流行的UI组件库中都已经正式启用，技术成熟度已经足够了。我已经在一些项目中启用CSS IN JS。

最后，点击阅读原文(打不开的话自己想办法~)，将会跳转到原作者地址，强烈建议大家多阅读英文原版文章和文档，全方位提升自己。

我是Peter,欢迎大家关注我的公众号：前端巅峰