“This is the fifth day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.

preface

If we want to write excellent code, we must first learn how to write excellent code from others. Only by drawing on previous experience and standing on the shoulders of giants can we write our own excellent code. Therefore, today we will take a look at how Ant Design describes its CSS architecture. And how it stands out among the many UI frameworks.

Ant design

First, to study his code, we have to find where we need to look at the code. Visit antD’s official website, find the GitHub icon, click to switch to the corresponding source repository, click the branch icon to switch to the branch, we can choose according to the branch to see their version of the source code.

This is the code location of the CSS architecture.

themes

Let’s look at the Themes file first.

If you open the default.less file inside, you’ll see that the configuration is public variables, and so on.

Combined with the categorized folder, we can find that this is the combination of the setting layer and theme we mentioned earlier.

He provides three sets of public variables. Use that set of public variables and import the corresponding files.

mixins

Open the mixins file as follows:

We’ll see that it’s divided by modules, and within each module there are some common styles and functions. This is consistent with the Tools layer we talked about earlier.

core

The core file directory is as follows:

Global.less is the global default configuration, just like the normalize file, which is responsible for default styles.

There are also some animation effects in the motion file, and some ICONS in the iconfont file.

Well, that’s all for today. You are still the best today. Come on, come on, you’re the best! Come on, come on, you’re the best! Oh huo, Bye Bye!!