CSS-Architektur in BS-Projekten_Laden Sie nur das CSS, das Sie benötigen.Erleben Sie den Austausch

Lassen Sie uns zunächst über die Vorteile dieser Architektur sprechen:
1. Die schwere CSS-Schreibarbeit kann problemlos verteilt werden, ohne sich gegenseitig zu beeinflussen.
2. Die Struktur ist klar und leicht zu warten und zu ändern.
3. Jede Webseite lädt nur das CSS, das sie benötigt.

Um es zusammenzufassen: Verbessern Sie die Entwicklungseffizienz, verbessern Sie die Wartungseffizienz und verbessern Sie die Effizienz beim Laden von Webseiten.

Lassen Sie mich das obige CSS-Strukturdiagramm erklären:

Die fünf schwarzen Symbole in der Mitte des Bildes stellen die Webseite dar, das obere ist die Masterseite und die unteren vier sind Unterseiten. Jeder, der VS verwendet, kennt die Rolle der Masterseite, die dem Include in ASP entspricht. Die gemeinsamen Teile werden in Masterseiten und die unabhängigen Teile in Unterseiten umgewandelt, um die Entwicklungseffizienz zu verbessern.

Das grüne Kästchen oben im Bild ist der globale CSS-Teil. Sie werden im Stilordner gespeichert, vom Master aufgerufen und auf alle Unterseiten angewendet.

Das blau gepunktete Feld oben im Bild ist ein einzelner CSS-Teil, in dem jede Unterseite über einen entsprechenden Ordner zum Speichern ihrer eigenen, eindeutigen CSS-Datei verfügt. Sie werden im Ordner „styles/x“ gespeichert. Gesteuert durch die entsprechenden C#-Dateien: Beim Öffnen verschiedener Unterseiten lädt der Master das CSS der aktuellen Seite.

Das rote Feld in der unteren linken Ecke des Bildes ist der Thementeil, der zum Speichern globaler Stile und Bilder verwendet wird. Die Funktion ist die gleiche wie bei der grünen Box, außer dass sie von der Unterseite und nicht von der Masterseite geladen wird. Es spielt keine Rolle, ob dieser Teil mit der grünen Box zusammengeführt wird.

Lassen Sie mich als Nächstes vorstellen, welchen Nutzen so viele CSS-Dateien haben.

– Adm/styles
– Globaler Basic-Stil von Basic.css
– Globaler Layout-Stil von Layout.css (Größe, Positionierung usw.)
– Globaler schöner Stil von General.css (Farbe, Bild) usw.)
– Ordner „Adm/styles/GroupManager“ (Beispiel)
– Group_Layout.css Gruppenseitenspezifischer Layoutstil
– Group_General.css Gruppenseitenspezifischer schöner Stil

Der Aufruf so vieler CSS führt zu mehr Serveranfragen. Die Lösung ist unten beigefügt.