Architecture CSS dans les projets BS_Chargez uniquement le CSS dont vous avez besoin_Expérience d'échange

Parlons d'abord des avantages de cette architecture :
1. Le gros travail d'écriture CSS peut être facilement distribué sans s'affecter les uns les autres.
2. La structure est claire et facile à entretenir et à modifier.
3. Chaque page Web ne charge que le CSS dont elle a besoin.

Pour résumer : améliorez l'efficacité du développement, améliorez l'efficacité de la maintenance et améliorez l'efficacité du chargement des pages Web.

Laissez-moi vous expliquer le diagramme de structure CSS ci-dessus :

Les cinq icônes noires au milieu de l'image représentent la page Web, celle du haut est la page maître et les quatre icônes du bas sont les sous-pages. Quiconque utilise VS connaît le rôle de la page maître, qui équivaut à l'inclusion dans ASP. Les parties communes sont transformées en pages maîtres et les parties indépendantes sont transformées en sous-pages pour améliorer l'efficacité du développement.

La case verte en haut de l'image est la partie CSS globale. Elles sont stockées dans le dossier styles, appelées par le maître et appliquées à toutes les sous-pages.

La zone pointillée bleue en haut de l'image est une seule partie CSS, dans laquelle chaque sous-page a un dossier correspondant pour stocker son propre fichier CSS unique. Ils sont stockés dans le dossier styles/x. Contrôlé par leurs fichiers C# correspondants : lors de l'ouverture de différentes sous-pages, le maître charge le CSS de la page actuelle.

La case rouge dans le coin inférieur gauche de l'image est la partie thème, qui est utilisée pour stocker les styles et les images globaux. La fonction est la même que la boîte verte, sauf qu'elle est chargée par la sous-page et non par la page maître. Peu importe si cette partie est fusionnée avec la boîte verte.

Ensuite, permettez-moi de vous présenter quelles sont les utilisations de tant de fichiers CSS ?

—Adm/styles
—Style de base global Basic.css
—Style de mise en page global Layout.css (taille, positionnement, etc.)
—Style magnifique global General.css (couleur, image) etc.)
—Dossier Adm/styles/GroupManager (exemple)
—Group_Layout.css Style de mise en page spécifique à la page du groupe
—Group_General.css Beau style spécifique à la page du groupe

Appeler autant de CSS entraînera plus de requêtes serveur. La solution est jointe ci-dessous.