Nach Abschluss einer Frontend-Arbeit vergessen viele Menschen die Struktur und Details des Projekts. Der Code wird jedoch nicht sofort vollständig fertiggestellt. In der verbleibenden Zeit werden fortlaufend Wartungsarbeiten durchgeführt, die möglicherweise nicht von Ihnen selbst abgeschlossen werden. Daher kann gut strukturierter Code seine Wartbarkeit erheblich optimieren. Hier sind fünf Möglichkeiten, die Wartbarkeit Ihrer CSS-Dateien zu verbessern, was einen besseren CSS-Styleguide darstellt.
1. Teilen Sie Ihre Stile auf
Teilen Sie bei kleinen Projekten den Code vor dem Schreiben des Codes entsprechend der Seitenstruktur oder dem Seiteninhalt in mehrere Blöcke auf und geben Sie Kommentare ab. Sie können beispielsweise globale Stile, Layouts, Schriftarten, Formulare, Kommentare und andere in mehrere verschiedene Blöcke unterteilen, um weiterarbeiten zu können.
Bei größeren Projekten wird dies natürlich keine Auswirkungen haben. An dieser Stelle muss der Stil in mehrere verschiedene Stylesheet-Dateien zerlegt werden. Das folgende Master-Stylesheet ist ein Beispiel für diesen Ansatz und seine Hauptaufgabe besteht darin, andere Style-Dateien zu importieren. Die Verwendung dieser Methode kann nicht nur die Stilstruktur optimieren, sondern auch dazu beitragen, einige unnötige Serveranfragen zu reduzieren. Es gibt viele Möglichkeiten, Dateien zu zerlegen, und das Master-Stylesheet verwendet die gebräuchlichste.
/*------------------------------------------------ ------------------- [Master-Stylesheet] |
Gleichzeitig können Sie bei großen Projekten auch Upgrade-Flags für CSS-Dateien oder einige Diagnosemaßnahmen hinzufügen, auf die hier nicht näher eingegangen wird.
2. Erstellen Sie einen CSS-Dateiindex
Um die Struktur der gesamten CSS-Datei schnell zu verstehen, empfiehlt es sich, am Anfang der Datei einen Dateiindex zu erstellen. Eine mögliche Methode besteht darin, einen baumförmigen Index zu erstellen: Die Struktur-ID und die Klasse können zu einem Zweig des Baums werden. wie folgt:
| /*------------------------------------------------ ------------------- [Layout] * Körper + Kopfzeile / #header + Inhalt / #content - Linke Spalte / #leftcolumn - Rechte Spalte / #rightcolumn - Seitenleiste / #Seitenleiste - RSS / #rss - Suchen / #suchen - Boxen / .box - Sideblog / #sideblog + Fußzeile / #Fußzeile Navigation #navbar Werbung .ads Inhaltsheader h2 ——————————————————————-*/ |
Oder das geht auch so:
/*------------------------------------------------ ------------------- [Inhaltsverzeichnis] -------------------------------------------------- ----*/ |
Eine andere Möglichkeit besteht darin, einfach zuerst den Inhalt ohne Einrückung aufzulisten. Wenn Sie im folgenden Beispiel zum RSS-Bereich springen müssen, suchen Sie einfach nach 8.RSS.
/*------------------------------------------------ ------------------- [Inhaltsverzeichnis] -------------------------------------------------- ----*/ /*------------------------------------------------ ------------------- |
Das Definieren einer solchen Stilsuche kann es anderen effektiv erleichtern, Ihren Code zu lesen und zu lernen. Wenn Sie an großen Projekten arbeiten, können Sie die Suche auch ausdrucken, um sie beim Lesen des Codes leichter nachschlagen zu können.