AntdUI和NextUI源码对比阅读（一）less 大战 css-in-js

在我对比阅读AntdUI和NextUI时候发现，两者写css的方式完全不一样：

1. AntdUI用的是less
2. NextUI用的是css-in-js 那么问题来了：什么是less，css-in-js？

什么是less？

查看官方定义：

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

注意到两个关键词：向后兼容，扩展语言。

1. 向后兼容的意思是：less可以兼容css语法，但是css不一定兼容less的语法。
2. 扩展语言：less在css上扩展了很多功能。 例如：

   • 变量：

     @width: 10px;
     @height: @width + 10px;
     
     #header {
       width: @width;
       height: @height;
     }
     

     对应css：

     #header {
       width: 10px;
       height: 20px;
     }
     

总结：less就是在css基础上扩展了一些有用的语法。less.js会在项目打包的时候，将.less文件编译生成对应的.css文件。

那用less代替css有什么好处和坏处？

好处：

1. 多了很多好用的语法：变量，混合，循环，函数等，能减少css代码重复

坏处：

1. 你需要学习熟悉less语法，虽然不难，也是需要投入时间
2. 往上还有其他的css扩展语言：scss，sass等，这些语法各不相同，增加使用者学习成本

什么是css-in-js？

css-in-js顾名思义：就是像使用js一样使用css。其实css-in-js是一种css写作方式，那我们要实现css-in-js呢？让我欢迎今天的主角：stitches!

1. 我们先安装stitches:

   # With npm
   
   npm install @stitches/react
   
   # With yarn
   
   yarn add @stitches/react
   

2. 直接使用：

   
   import { styled } from '@stitches/react';
   
   // 用stitches api构建Button
   const Button = styled('button', {
   
       backgroundColor: 'gainsboro',
   
       borderRadius: '9999px',
   
       fontSize: '13px',
   
       padding: '10px 15px',
   
       '&:hover': {
   
       backgroundColor: 'lightgray',
   
       },
   
   });
   
   // 渲染我们的组件
   () => <Button>Button</Button>;
   

3. 就能马上看到我们的组件：

   

是不是很简单！

但是为啥我们不直接用css，或者less？

1. 首先，css-in-js能让我们写css能够享受所有js的功能，变量，函数，map等，能减少css重复。
2. js语法对于大多数前端没有学习成本，所以建议选css-in-js，而不是less
3. js语法功能明显要强于less的功能，例如less的map，if，循环功能非常不好用

所以这一局，css-in-js赢过less，建议大家尝试尝试stitches!