Leitfaden zur Verbesserung der Wartbarkeit und Lesbarkeit von CSS-Dateien Seite 1/2_Experience Exchange

Gut strukturierter Code kann seine Wartbarkeit erheblich optimieren. Nachfolgend finden Sie vier Tipps zur Verbesserung der Wartbarkeit von CSS-Dateien als Leitfaden für die Durchführung der WEB-Frontend-Entwicklung mit einer besseren Organisationsgewohnheit im CSS-Stil.

1. Zerlegung von CSS-Stildateien

Teilen Sie bei kleinen Projekten den Code entsprechend der Seitenstruktur oder dem Seiteninhalt in mehrere Blöcke auf und geben Sie Kommentare ein . 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.



@import "reset.css?1.1.5";
@import "layout.css?1.1.5";
@import "colors.css?1.1 .5";
@import "typography.css?1.1.5";
@import "flash.css?1.1.5";
/* @import "debugging.css?1.1.5" ; */


Gleichzeitig können Sie bei großen Projekten auch Upgrade-Flags für CSS-Dateien oder einige Diagnose- und andere Maßnahmen hinzufügen, auf die hier nicht näher eingegangen wird. Bitte achten Sie bei der Umsetzung auf das Zusammenfassen und Nachdenken, gerne können Sie auch auf die entsprechenden Artikel von jb51.net verweisen.

2. Indizieren Sie die CSS-Datei
Um die Struktur der gesamten CSS-Datei schnell zu verstehen, ist es eine gute Wahl, am Anfang der Datei einen Dateiindex zu erstellen .
Eine praktikable Methode besteht darin, einen baumförmigen Index zu erstellen. Die Struktur-ID und die Klasse können zu einem Zweig des Baums werden.
[Layout]
* Körper
+ Header / #header
+ Inhalt / #content
- Linke Spalte / #leftcolumn
- Rechte Spalte / #rightcolumn
- Seitenleiste / #sidebar
- RSS / #rss
- Suche / #search
- Boxen / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content Header h2

Oder es kann so sein:
[Contents]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3.1. Linke Spalte / #leftcolumn
3.3. Sidebar / #sidebar
3.3.1 / # rss
3.3.2. Suche / #search
3.3.3. Sideblog / #sideblog
4. Fußzeile / #footer


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, müssen Sie lediglich eine einfache Suche durchführen.

[Inhalt]
2. Kopfzeile / #navbar
5. #linke Spalte
6. Rechte Spalte / #rechte Spalte
8. Suche / #Suche
10. Boxen / .box
11. Sideblog / #sideblog
12. Anzeigen / .ads
13. Footer / #footer

/*--[8. RSS / #rss]--*/
#rss { ... }
#rss img { ... }

Das Definieren eines solchen Stilabrufs 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.