CSS architecture in BS Project _ loading only the CSS you need

Let's talk about the advantages of this architecture:
1. You can easily allocate heavy CSS compilation tasks without affecting each other.
2. Clear structure, facilitating maintenance and modification.
3. Each page only loads the CSS you need.

The conclusion is: improve development efficiency, maintenance efficiency, and webpage loading efficiency.

The above CSS structure is explained below:

The five black icons in the middle of the figure represent the webpage. One of them is the master page, and the other four are subpages. Anyone who uses vs knows the role of the master page, which is equivalent to include in ASP. They make the common part as the master page, and separate the part as a sub-page to improve development efficiency.

In the green box above the figure, the global CSS section is stored in the styles folder, called by the master and applied to all subpages.

The blue dotted box above the figure is a single CSS part, and each subpage has a corresponding folder to store its own CSS file. They are stored in the styles/X folder. Controlled by the corresponding C # file: when different subpages are opened, the master node loads the CSS of the current page.

The red box in the lower-left corner of the image is the topic to store global styles and images. The function is the same as that of the Green Box, except that it is loaded by subpages rather than the master node. This section does not affect the combination of green boxes.

Next I will introduce how to use so many CSS files?

-ADM/styles
--Basic.css global basic style
--Layout.css global layout style (dimensions, positioning, etc)
--General.css global aesthetic style (color, image, etc)
-ADM/styles/groupmanager folder (example)
--Group_layout.css the layout style unique to the group page
--Group_general.css beautiful style unique to the group page

Calling so many CSS will bring about a large number of server requests. The solution is attached below.