Why We're Breaking Up with CSS-in-JS？-优快云博客

本文链接：https://blog.youkuaiyun.com/petertanjinjie/article/details/128556879

故事的开头

最近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中