First of all, the advantages of this architecture:
1. It is easy to allocate the heavy work of CSS writing without affecting each other.
2. Clear structure, conducive to maintenance and modification.
3. Each page loads only the CSS you need.
Summed up is: improve the development efficiency, improve maintenance efficiency, improve page load efficiency.
Let me explain the above CSS structure diagram:
The 5 black icons in the middle of the graph represent the Web page, where a separate one is the master page, and the next four are the sub-pages. People using vs know that the role of the master page is equivalent to the Include in ASP, the common part as a master, the separate part as a sub-page, improve the development efficiency.
In the green box above the figure is the global CSS section, which is stored in the Styles folder and is called by the master and acts on all child pages.
The Blue dashed box above the graph is a single CSS section, where each sub-page has a corresponding folder to hold its own unique CSS file. They are stored in the styles/x folder. controlled by their respective C # files: When you open different sub-pages, the master loads the CSS for the current page.
The red box in the lower-left corner of the graph is the theme part that holds the global styles and pictures. The function is the same as the green box, except that it is loaded by a child page, not the master unified load. This part and the green box merge also does not have the big obstacle.
Let me introduce you to a lot of CSS files.
-adm/styles
--BASIC.CSS Global Base Style
--LAYOUT.CSS Global layout style (dimensions, positioning, etc.)
--GENERAL.CSS Global beauty Style (color, picture, etc.)
-adm/styles/groupmanager folder (example)
--GROUP_LAYOUT.CSS Group page-specific layout styles
--GROUP_GENERAL.CSS Group page-specific aesthetic style
Calling so many CSS will result in more server requests, with a workaround attached below.