CSS `Type-safe CSS` (`TypeScript`) 结合 `CSS-in-TS` 的极致开发体验

各位靓仔靓女们，晚上好！我是你们今晚的CSS届老司机，今天咱们不飙车，咱们聊聊CSS的"Type-safe"之路，以及如何用TypeScript和CSS-in-TS打造极致的开发体验，让你的CSS代码不再像脱缰的野马，而是像训练有素的赛马，指哪打哪，稳得一批！

准备好了吗？系好安全带，咱们这就发车！

第一站：CSS的痛点，Type-safe的需求

咱们先来回忆一下，在没有Type-safe CSS的日子里，我们都经历过哪些痛苦？

拼写错误： 辛辛苦苦写了一堆CSS，结果collor: red;，浏览器默默地告诉你，没啥变化。你盯着代码看了半天，才发现"color"拼错了。简直想锤爆自己的狗头！
属性不存在： 脑子一热，想给<div>加个zoom: 2;，结果浏览器鸟都不鸟你，因为zoom压根不是所有元素都能用的属性。
值类型错误： 你想把width设置成true，浏览器直接给你忽略了，因为width只能是长度、百分比或者auto。
重构噩梦： 改了一个类名，结果发现N个地方都用了这个类名，一个一个改到天荒地老。

这些问题，归根结底，都是因为CSS缺少类型检查。CSS就像一个自由奔放的牛仔，你想怎么写就怎么写，浏览器只能尽力去解析，解析不了就直接忽略，没有任何提示。

所以，我们迫切需要一种Type-safe的CSS方案，让CSS也能像TypeScript一样，在编译时就能发现错误，避免运行时出现各种奇奇怪怪的问题。

第二站：TypeScript + CSS Modules，初探Type-safe

TypeScript + CSS Modules是一种比较常见的Type-safe CSS方案。它的基本思路是：

CSS Modules： 将CSS文件模块化，每个CSS文件都有自己的作用域，避免全局污染。
TypeScript： 通过TypeScript的类型定义，将CSS Modules导出的类名定义成类型，从而实现对CSS类名的类型检查。

我们来看一个简单的例子：

src/components/Button.module.css:

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.primary {
  background-color: green;
}

.secondary {
  background-color: gray;
}

src/components/Button.tsx:

import styles from './Button.module.css';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

const Button: React.FC<ButtonProps> = ({ variant = 'primary', children }) => {
  const className = `${styles.button} ${variant === 'primary' ? styles.primary : styles.secondary}`;

  return <button className={className}>{children}</button>;
};

export default Button;

在这个例子中，Button.module.css定义了三个类名：button、primary和secondary。TypeScript通过import styles from './Button.module.css';将这些类名导入到Button.tsx中。

为了让TypeScript能够识别这些类名，我们需要安装一个工具：@types/webpack-env。这个工具会为CSS Modules生成对应的类型定义文件。

安装方法：

npm install --save-dev @types/webpack-env

安装完成后，我们需要在tsconfig.json文件中添加以下配置：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "esModuleInterop": true,
    "resolveJsonModule": true,
  },
  "include": ["src"]
}

这样，TypeScript就能自动识别CSS Modules导出的类名，并进行类型检查。

优点：

类型安全： TypeScript可以检查CSS类名的拼写错误和是否存在。
模块化： CSS Modules可以避免全局污染。

缺点：

配置繁琐： 需要安装和配置@types/webpack-env。
类型定义不够完善： 只能检查类名是否存在，无法检查CSS属性和值的类型。
代码冗余： 需要手动拼接类名，代码可读性较差。

第三站：CSS-in-TS，更进一步的Type-safe

CSS-in-TS是一种将CSS写在TypeScript代码中的方案。它的基本思路是：

使用CSS-in-TS库： 例如styled-components、emotion、stitches等。
在TypeScript代码中定义CSS： 使用这些库提供的API，在TypeScript代码中定义CSS样式。
利用TypeScript的类型系统： 利用TypeScript的类型系统，对CSS属性和值进行类型检查。

我们以styled-components为例，来看一个简单的例子：

src/components/Button.tsx:

import styled from 'styled-components';

interface ButtonProps {
  variant?: 'primary' | 'secondary';
  children: React.ReactNode;
}

const Button = styled.button<ButtonProps>`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;

  ${({ variant }) =>
    variant === 'primary' &&
    `
      background-color: green;
    `}

  ${({ variant }) =>
    variant === 'secondary' &&
    `
      background-color: gray;
    `}
`;

export default Button;

在这个例子中，我们使用styled-components的styled.button方法创建了一个Button组件。这个组件的样式是在TypeScript代码中定义的。

styled-components会自动为我们生成一个唯一的类名，并将这个类名应用到button元素上。

更重要的是，styled-components利用TypeScript的类型系统，对CSS属性和值进行类型检查。例如，如果我们尝试将width设置为true，TypeScript会报错：

const Button = styled.button`
  width: true; // Error: Type 'true' is not assignable to type 'WidthProperty<string | number>'
`;

优点：

类型安全： TypeScript可以检查CSS属性和值的类型。
代码简洁： 不需要手动拼接类名，代码可读性更好。
动态样式： 可以方便地根据props动态改变样式。
主题化： 可以方便地实现主题化。

缺点：

学习成本： 需要学习CSS-in-TS库的API。
运行时开销： CSS-in-TS库需要在运行时生成CSS，可能会有一定的性能开销。

第四站：CSS-in-TS进阶：更极致的开发体验

CSS-in-TS已经足够强大了，但是我们还可以通过一些技巧，让开发体验更上一层楼。

类型提示： 使用TypeScript的类型提示，可以让我们在编写CSS时，获得更好的代码提示。

例如，我们可以定义一个Theme类型，用于描述主题的颜色：
```
interface Theme {
  primaryColor: string;
  secondaryColor: string;
}

const theme: Theme = {
  primaryColor: 'green',
  secondaryColor: 'gray',
};

const Button = styled.button`
  background-color: ${props => props.theme.primaryColor};
`;

Button.defaultProps = {
  theme,
};
```
这样，当我们输入props.theme.时，TypeScript会自动提示primaryColor和secondaryColor。
代码片段： 使用代码片段，可以快速生成常用的CSS代码。

例如，我们可以定义一个代码片段，用于生成flex布局的代码：
```
{
  "Flex Layout": {
    "prefix": "flex",
    "body": [
      "display: flex;",
      "justify-content: ${1:center};",
      "align-items: ${2:center};"
    ],
    "description": "Generate flex layout code"
  }
}
```
这样，当我们输入flex时，编辑器会自动弹出这个代码片段，我们可以快速生成flex布局的代码。
ESLint插件： 使用ESLint插件，可以检查CSS代码的风格和潜在问题。

例如，可以使用eslint-plugin-styled-components插件，检查styled-components的代码风格。
```
npm install --save-dev eslint-plugin-styled-components
```
然后在.eslintrc.js文件中添加以下配置：
```
module.exports = {
  plugins: ['styled-components'],
  rules: {
    'styled-components/no-styled-template-literals': 0,
  },
};
```
这个插件可以检查styled-components中是否使用了模板字符串，并给出相应的警告。

与UI库集成： 将CSS-in-TS与UI库（如Material-UI，Ant Design）结合，可以更方便地使用UI库的组件，并自定义组件的样式。

例如，对于Material-UI，可以使用styled API来自定义组件的样式：

import { styled } from '@mui/material/styles';
import Button from '@mui/material/Button';

const MyButton = styled(Button)({
  backgroundColor: 'purple',
  color: 'white',
  '&:hover': {
    backgroundColor: 'darkpurple',
  },
});

export default MyButton;

第五站：各种CSS-in-TS库的对比

市面上有很多CSS-in-TS库，它们各有优缺点。我们来简单对比一下：

库	优点	缺点	适用场景
`styled-components`	社区庞大，生态完善；动态样式强大；支持主题化；学习曲线平缓。	运行时开销较大；生成的类名可读性较差。	适用于大多数React项目，特别是需要动态样式和主题化的项目。
`emotion`	性能优秀；支持多种样式写法（CSS-in-JS，CSS-in-CSS）；体积小巧；与React生态集成良好。	动态样式不如`styled-components`强大；主题化需要额外配置。	适用于对性能有较高要求的React项目，或者需要使用CSS-in-CSS的React项目。
`stitches`	编译时生成CSS，性能极佳；类型安全；支持主题化；CSS原子化。	学习曲线较陡峭；生态不如`styled-components`完善。	适用于对性能有极致要求的React项目，或者需要使用CSS原子化的项目。
`vanilla-extract`	零运行时开销，完全在构建时生成CSS；强类型支持；支持主题化；可与任何JS框架集成。	需要配置构建工具；动态样式不如其他库灵活。	适用于希望完全避免运行时CSS-in-JS的项目，对框架没有特定要求，性能要求高。
`linaria`	与`vanilla-extract`类似，编译时生成CSS；支持多种样式写法；体积小巧。	动态样式不如其他库灵活；生态不如`styled-components`完善。	适用于希望完全避免运行时CSS-in-JS的项目，并且需要更多CSS语法的支持。

选择哪个库，取决于你的具体需求。如果你对性能要求不高，并且需要动态样式和主题化，那么styled-components是一个不错的选择。如果你对性能有较高要求，那么emotion或stitches可能更适合你。如果你希望完全避免运行时CSS-in-JS，那么vanilla-extract或linaria是你的最佳选择。

第六站：总结

今天我们一起探讨了CSS的Type-safe之路，以及如何用TypeScript和CSS-in-TS打造极致的开发体验。

我们首先回顾了CSS的痛点，以及Type-safe的需求。
然后，我们介绍了TypeScript + CSS Modules这种初探Type-safe的方案。
接着，我们深入了解了CSS-in-TS，以及如何利用TypeScript的类型系统，对CSS属性和值进行类型检查。
最后，我们分享了一些CSS-in-TS的进阶技巧，以及各种CSS-in-TS库的对比。

希望今天的分享能够帮助大家更好地理解和使用Type-safe CSS，让你的CSS代码更加健壮、可靠、易于维护。

记住，Type-safe CSS不是银弹，它不能解决所有问题。但是，它可以帮助我们避免很多常见的CSS错误，提高开发效率，改善开发体验。

所以，赶快行动起来，拥抱Type-safe CSS吧！

今天的讲座就到这里，谢谢大家！

发表回复 取消回复

发表回复取消回复