CSS architecture in BS projects_Only load the CSS you need_Experience exchange

Let me first talk about the advantages of this architecture:
1. The heavy CSS writing work can be easily distributed without affecting each other.
2. The structure is clear and easy to maintain and modify.
3. Each web page only loads the CSS it needs.

The summary is: improve development efficiency, improve maintenance efficiency, and improve web page loading efficiency.

Let me explain the above CSS structure diagram:

The five black icons in the middle of the picture represent web pages, of which the top one is the master page and the bottom four are sub-pages. Anyone who uses VS knows the role of the master page, which is equivalent to the include in ASP. The common parts are made into master pages, and the independent parts are made into sub-pages to improve development efficiency.

The green box at the top of the picture is the global CSS part. They are stored in the styles folder, called by the master and applied to all subpages.

The blue dotted box at the top of the picture is a single CSS part, in which each sub-page has a corresponding folder to store its own unique CSS file. They are stored in the styles/x folder. Controlled by their corresponding C# files: when opening different subpages, the master loads the CSS of the current page.

The red box in the lower left corner of the picture is the theme part, which is used to store global styles and pictures. The function is the same as the green box, except that it is loaded by the sub-page, not the master page. It doesn't matter if this part is merged with the green box.

Next, let me introduce what are the uses of so many CSS files?

—Adm/styles
——Basic.css global basic style
——Layout.css global layout style (size, positioning, etc.)
——General.css global beautiful style (color, picture) etc.)
—Adm/styles/GroupManager folder (example)
—Group_Layout.css Group page-specific layout style
—Group_General.css Group page-specific beautiful style

Calling so many CSSs will bring more server requests. The solution is attached below.