Erfahrungszusammenfassung zur Planung und Verwaltung von CSS-Stylesheets_Erfahrungsaustausch

Es ist mehr als ein Jahr her, seit ich das Tabellenlayout komplett aufgegeben und xhtml+CSS zum Erstellen von Websites verwendet habe. Nach mehr als einem Jahr Praxis habe ich eine gewisse Erfahrung gesammelt. Jetzt schreibe ich diesen Artikel, um ihn zusammenzufassen. Bei der Verwendung von xhtml+CSS zum Erstellen einer Website gibt es ein zentrales Problem: die Planung und Verwaltung des CSS-Stylesheets der Website.

Meine Geschichte der CSS-Management-Entwicklung

Als ich CSS zum ersten Mal zur Steuerung von Website-Stilen verwendete, wusste ich nicht viel über CSS-Management-Planung, fügte ich hinzu Sie haben sie jederzeit geändert, und ich dachte zunächst nicht, dass daran etwas nicht stimmte, aber dann kamen immer mehr hinzu und die Änderungen wurden immer chaotischer. Obwohl es einige Kommentare gab, gab es mir am Ende immer noch schon beim bloßen Anblick Kopfschmerzen bekommen. Zu diesem Zeitpunkt befand sich das gesamte CSS einer Website ohne Planung in einer Datei und die Reihenfolge war nicht sehr regelmäßig. Daher konnte ich nur den Namen der Klasse auf der HTML-Seite finden und dann unter Tausenden nach dem suchen, was ich wollte von Zeilen CSS-Code.

Nach einer Weile, nachdem ich nachgedacht und zusammengefasst hatte, erstellte ich einen vorläufigen Plan für das CSS-Stylesheet der Website. Das Stylesheet ist zunächst in drei Bereiche unterteilt:

Beispiel-Quellcode [www.52css.com]
Basis-Stylesheet
Layout-Stylesheet
Klassen-Stylesheet
　wobei " " „Basis-Stylesheet“ wird verwendet, um einige allgemeine Dinge zu beschreiben, wie z. B. einen globalen Text, einen Stil usw.; „Layout-Stylesheet“ wird verwendet, um ein eindeutiges ID-Layout zu beschreiben, das zum Rahmenlayout der gesamten Seite gehört; „Klasse Das Stylesheet „“ wird verwendet, um die Stile der übrigen Klassen zu beschreiben. Diese Stile sind in wiederverwendbare Stile und Stile unterteilt, die normalerweise nur einmal oder einige Male auf einer speziellen Seite erscheinen.

Das Layout nach dieser Methode verbessert zwar die Effizienz erheblich, ist jedoch nur für kleine und mittlere Websites geeignet. Die Anwendung auf großen Websites ist zumindest bei der Zusammenarbeit mehrerer Personen noch etwas dünn. es kann nicht die besten Ergebnisse erzielen. Es gibt also ein relativ vollständiges CSS-Managementplanungsmodell, das unten zusammengefasst ist.

Vollständigerer CSS-Stylesheet-Verwaltungsmodus

Schritt 1: Einzelpersonen oder Teams müssen das Layout der Hauptseiten hierarchisch mithilfe eines DIV-Diagramms zeichnen. Dieses DIV-Diagramm ist die Grundlage für den Design-Prototyp On Markieren Sie auf der Seite die ID-Namen und Klassennamen, die von den Hauptmodulen auf der Seite verwendet werden, um die Erstellung von Wartungsdokumenten für zukünftige Änderungen und Upgrades zu erleichtern.

Schritt 2: Teilen Sie die CSS-Struktur auf und richten Sie globales CSS und jedes Modul-CSS ein. Verweisen Sie auf das globale CSS auf der HTML-Seite und auf das CSS jedes Moduls im globalen CSS.

Beispielquellcode [www.52css.com]
Erstellen Sie global.css als globales CSS und definieren Sie globale Stile wie „* { … } body { … }“ im globalen CSS.
Führen Sie Modul-CSS im globalen Stil über „@import url(“xxx.css“);“ ein.
Was die Aufteilung des Modul-CSS betrifft, bevorzuge ich die CSS-Aufteilungsmethode ähnlich der in WordPress. Im Allgemeinen ist sie durch eine Struktur ähnlich der folgenden unterteilt:

Beispielquellcode [www.52css.com ]
layout.css /* Gesamtes Site-Layout */
public.css /* Öffentlicher Kombinationsstil */
header.css /* Seitenkopfbereichsstil */
sidebar.css /* Seitenleiste Bereichsstil * /
main.css /* Hauptbereichsstil */
footer.css /* Unterer Bereichsstil */
index.css /* Startseitenbereichsspezifischer Stil */
form .css /* Form Class style */
Erklären Sie, dass layout.css für das Layout der gesamten Website verantwortlich ist, z. B. für die Grundposition und das Stildesign von #header, #footer und anderen Layouts für einige gängige Stildefinitionen, da eine Klasse in einer Klasse verwendet werden kann =“navbar font12px“ Diese Methode verwendet die Leerzeichentrennungsmethode, um mehrere Klassenstile anzuwenden, sodass Sie einige häufig verwendete Klassen definieren können oder unter Spezialbedingungen geändert werden müssen Umstände, um die lokale Feinabstimmung zu erleichtern; Module wie header.css und footer.css sind CSS-Stylesheets, die den Modulen Header, Sidebar und Bottom entsprechen und entsprechend den spezifischen Anforderungen hinzugefügt oder gelöscht werden können Website; index.css ist das CSS für einige einzigartige Elemente der Homepage. Bei der Gestaltung von CSS wird der Homepage im Allgemeinen die komplexeste Seite in CSS gewidmet. Es ist notwendig, die eindeutigen CSS-Elemente der Homepage zu klassifizieren und zu platzieren. Sie können es auch separat als Referenz auf der Homepage einfügen Es ist nicht schwierig, es zur einfachen Steuerung separat in eine CSS-Datei einzufügen. Natürlich können Sie auch andere ähnliche Elemente verwenden.

Schritt 3: Schreiben Sie Stile in jede Stylesheet-Datei.​