Zusammenfassung von fünf Methoden zur Verbesserung der Wartbarkeit des CSS-Dateien_Erfahrungsaustauschs

1. Zerlegen Sie Ihren Stil

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 diese Methode und seine Aufgabe besteht hauptsächlich 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]
Projekt: Smashing Magazine
Version : 1.1
Letzte Änderung: 02.05.08 [Float-Bug behoben, vf]
Zugewiesen an: Vitaly Friedman (vf), Sven Lennartz (sl)
Hauptverwendung: Magazin
--- ----- --------------------------------------------- ----- --------*/
@import "reset.css";
@import "layout.css"
@import "colors.css"
@import " typography.css";
@import "flash.css";
/* @import "debugging.css"; */

Gleichzeitig für große Projekte , Sie können auch CSS-Dateien hinzufügen. Upgrade-Flags oder einige Diagnosemaßnahmen werden hier nicht näher beschrieben.

2. Erstellen Sie einen CSS-Dateiindex

Um die Struktur der gesamten CSS-Datei schnell zu verstehen, ist es eine gute Wahl, am Anfang der Datei einen Dateiindex zu erstellen. Eine mögliche Methode besteht darin, einen baumförmigen Index zu erstellen: Sowohl die Struktur-ID als auch die Klasse können zu einem Zweig des Baums werden. Wie folgt:

/*----------------------------------------------------- - --------------------------
[Layout]
* Körper
+ Header / #header
+ Inhalt / #content
- Linke Spalte / #leftcolumn
- Rechte Spalte / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Suchen / #search
- Boxen / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
————————— — ————————————-*/
Oder es kann so sein:

/*---------------- --- ------------------

[Inhaltsverzeichnis] ​​
2. Header / #header
3.1 Spalte / #linkeSpalte
3.3. Rechte Spalte / #rechteSpalte
3.3.1. Suche / #Suche
3.3. 3. Boxen / .box
3.3.4. Anzeigen / .ads
4. -------------------------------------------------- -- -------*/

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] ​​
1 . Header / #header
3. Inhalt / #content
5. #sidebar
8. RSS / #rss
9. Boxen / .box
11. Anzeigen / .ads
13. Fußzeile / # Fußzeile

-------------------------------------- ----------- ------------*/



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

Definition Eine solche 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.

3. Definieren Sie Ihre Farben und Ihr Layout

Wir können in CSS keine Konstanten verwenden, aber beim Schreiben von Farb- und Layoutcode stoßen wir häufig auf Klassen, die häufig verwendet werden können eine CSS-Konstante.

Eine Möglichkeit, die Unsicherheit von CSS-Konstantendefinitionen zu verringern, besteht darin, einige Definitionen in Kommentaren oben in der CSS-Datei einzufügen, also Konstanten zu definieren. Eine der einfachsten Anwendungen ist die Erstellung einer Farbtabelle. Auf diese Weise können Sie schnell die Farbe der gesamten Seite verstehen und so Fehler bei wiederholten Änderungen vermeiden. Wenn Sie Änderungen an der Farbe vornehmen müssen, können Sie diese schnell finden.

/*------------------------------------------ --- -----------
# [Farbcodes]

# Dunkelgrau (Text): #333333
# Dunkelblau (Überschriften, Links) #000066
# Mittelblau (Kopfzeile) #333399
# Hellblau (obere Navigation) #CCCCFF
# Mittelgrau: #666666
# */

Alternativ können Sie die in Ihrem Layout verwendeten Farben beschreiben. Für eine bestimmte Farbe können Sie die Blöcke auflisten, die diese Farbe verwenden. Natürlich können Sie die Farben auch nach Seitenelementen auflisten.

/*------------------------------------------ --- -------------------------
[Farbcodes]
Hintergrund: #ffffff (weiß)
Inhalt : #1e1e1e (hellschwarz)
Kopfzeile h1: #9caa3b (grün)
Kopfzeile h2: #ee4117 (rot)
Fußzeile: #b5cede (dunkelschwarz)

a (Standard) : #0040b6 (dunkelblau)
a (besucht): #5999de (hellblau)
a (aktiv): #cc0000 (rosa)
------------- --- ------------------ ---* /

hat das gleiche Beispiel für das Layout.

/*------------------------------------------ --- -------------------------
[Typografie]

Texttext: 1,2em/1,6em Verdana , Helvetica, Arial, Geneva, serifenlos;
Kopfzeilen: 2,7em/1,3em Helvetica, Arial, „Lucida Sans Unicode“, Verdana, serifenlos;
Eingabe, Textbereich: 1,1em Helvetica, Verdana, Genf, Arial, serifenlos;
Seitenleistenüberschrift: 1,5em Helvetica, Trebuchet MS, Arial, serifenlos

Hinweise: Verringern der Überschrift um 0,4em mit jeder weiteren Überschriftenebene
-- ----- --------------------------------------------- ----- ----------*/

4. CSS-Eigenschaften formatieren

Wenn wir Code schreiben, verbessert die Verwendung einiger spezieller Codierungsstile die Lesbarkeit von CSS Code. Lesbarkeit hilft sehr. Viele Menschen haben unterschiedliche Codierungsstile. Manche Leute sind es gewohnt, Farbe und Schriftartcode an die erste Stelle zu setzen, während andere es vorziehen, „wichtigere“ Attribute wie Gleiten und Positionierung an die erste Stelle zu setzen. Ebenso können Seitenelemente nach ihrer Struktur im Layout sortiert werden:

body,
h1, h2, h3,
p, ul, li,
form {
border : 0;
margin: 0;
padding: 0;
}

Einige Entwickler verwenden eine interessantere Methode: Sie ordnen die Eigenschaften in alphabetischer Reihenfolge an. Es ist zu beachten, dass ein solcher Ansatz bei einigen Browsern zu Problemen führen kann.

Unabhängig von Ihrem Format müssen Sie sicherstellen, dass Sie diese Formatierungsmethoden klar definiert haben. Auf diese Weise werden Ihre Kollegen Ihre Bemühungen zu schätzen wissen, wenn sie Ihren Code lesen.

5. Einrückung wird dein Freund sein!

Um Ihren Code intuitiver zu gestalten, können Sie eine Zeile verwenden, um den Stil des Gliederungselements zu definieren. Diese Methode führt zu Verwirrung, wenn der angegebene Selektor mehr als drei Attribute enthält. Bei maßvoller Anwendung lassen sich jedoch Unterschiede innerhalb derselben Klasse deutlich erkennen.

#main-column { display: inline; float: left; width: 30em }
#main-column h1 { font-family: Georgia, „Times New Roman“, Times, serif; -bottom: 20px; }
#main-column p { color: #333 }

Gleichzeitig ist die Aufrechterhaltung der Stiländerung auch ein lästiges Problem. Viele Leute vergessen es, nachdem sie den Stil geändert haben. Infolgedessen stellen sie später fest, dass der geänderte Stil Seitenfehler verursacht hat, und müssen intensiv danach suchen. Daher ist es notwendig, ein spezielles Format für den geänderten Stil zu erstellen. Eine sehr einfache Möglichkeit besteht darin, den geänderten Stil einzurücken. Gleichzeitig können Sie auch einige Kommentare (z. B. „@new“) verwenden, um eine Markierung vorzunehmen.

#sidebar ul li a {
display: block
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}

Im Allgemeinen hilft nur die Erstellung eines richtigen Styleguides. Denken Sie daran, alle Styleguides zu entfernen, die Ihnen das Verständnis des Dokuments nicht erleichtern, und vermeiden Sie die Verwendung zu vieler Styleguides für zu viele Elemente. Arbeiten Sie dann hart an einer CSS-Datei, die lesbar und wartbar ist.