前言

要想写出优秀的代码，必然是要先看看学习别人的优秀的代码是如何写出来的，所以今天我们就来看看 Ant design 是如何抒写自己的 css 架构的。

Ant design

首先，研究他的代码，必需得找到我们所需要观察代码的位置。

如上图，就是 css 架构所在的代码位置。

themes

我们先来看看 themes 文件。

点开里面的 default.less 文件，我们会发现里面配置是一些公共变量，以此类推，其他文件亦是如此。

再结合，分类的文件夹，我么可以发现，这就是之前我们所说的 setting 层和 theme 的结合在一起的结果。

他提供了三套公共变量，使用那一套公共变量，引入相应的文件就可以了。

mixins

打开 mixins 文件如下：

我们会发现里面是按照模块划分的，并且每个模块里面是一些公共样式和函数。这就和我们之前说到 tools 层一致。

core

core 文件目录如下：

里面的 global.less 就是一些全局默认配置，如同我们之前说的 normalize 文件一样，负责一些默认样式。

里面还有一些动画效果，在 motion 文件下，和一些图标，在 iconfont 文件下。

好，今天就到这里了，好困呢，最近 bug 有点多，修修补补的，以后绝对要好好写代码，不然后期维护真是灾难，着实把我累着了，拜了个拜，再见，今天努力的你依然是最棒的。加油，加油，你最棒！加油，加油，你最强！哦豁，Bye Bye！！！