Résumé de cinq méthodes pour améliorer la maintenabilité des fichiers CSS_Experience Exchange

1. Décomposez votre style

Pour les petits projets, avant d'écrire le code, divisez le code en plusieurs blocs selon la structure de la page ou le contenu de la page et donnez des commentaires. Par exemple, vous pouvez séparer les styles globaux, les mises en page, les styles de police, les formulaires, les commentaires et autres en plusieurs blocs différents pour continuer à travailler.

Pour les projets plus importants, cela n'aura évidemment aucun effet. À ce stade, le style doit être décomposé en plusieurs fichiers de feuilles de style différents. La feuille de style principale ci-dessous est un exemple de cette méthode, et son travail consiste principalement à importer d'autres fichiers de style. L'utilisation de cette méthode peut non seulement optimiser la structure de style, mais également contribuer à réduire certaines requêtes inutiles du serveur. Il existe de nombreuses façons de décomposer des fichiers, et la feuille de style principale utilise la plus courante.

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

[Feuille de style principale]
Projet : Smashing Magazine
Version : 1.1
Dernière modification : 02/05/08 [bug Float corrigé, vf]
Attribué à : Vitaly Friedman (vf), Sven Lennartz (sl)
Utilisation principale : Magazine
--- ----- --------------------------------------------- ----- ---------*/
@import "reset.css"
@import "layout.css"
@import "couleurs.css"; 🎜>@import " typography.css";
@import "flash.css"
/* @import "debugging.css"; */

En même temps, pour les grands projets , vous pouvez également ajouter des fichiers CSS. Des indicateurs de mise à niveau ou certaines mesures de diagnostic ne seront pas détaillées ici.

2. Créer un index de fichier CSS

Afin de comprendre rapidement la structure de l'ensemble du fichier CSS, c'est un bon choix de créer un index de fichier au début du fichier. Une méthode possible consiste à construire un index en forme d'arbre : l'identifiant structurel et la classe peuvent devenir une branche de l'arbre. Comme suit :

/*--------------------------------------- - --------------------------
[Mise en page]
* corps
+ En-tête / #en-tête
+ Contenu / #content
- Colonne de gauche / #leftcolumn
- Colonne de droite / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Recherche / #search
- Boxes / .box
- Sideblog / #sideblog
+ Footer / #footer
Navigation #navbar
Publicités .ads
En-tête de contenu h2
————————— — ————————————-*/
Ou ça peut être comme ça :

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

[Table des matières]
1. Corps
2. En-tête / #header
2.1. Navigation / #navbar
3. colonne / # colonne gauche
3.2. Colonne de droite / #colonne droite
3.3. Barre latérale / #sidebar
3.3.1. RSS / #rss
3.3.2. 3. Boîtes / .box
3.3.4. Sideblog / #sideblog
3.3.5 Publicités / .ads
4. Footer / #footer

-------. -- ------------------------------------------------ -- -------*/

Une autre façon consiste simplement à lister d'abord le contenu, sans indentation. Dans l'exemple ci-dessous, si vous devez accéder à la section RSS, recherchez simplement 8.RSS.

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

[Table des matières]
1 Corps
2. . En-tête / #header
3. Navigation / #navbar
4. Contenu / #content
5. Colonne de gauche / #leftcolumn
6. #sidebar
8. RSS / #rss
9. Recherche / #search
10. Boîtes / .box
11. 13. Pied de page / #pied de page

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



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

Définition Un tel style de recherche peut effectivement permettre aux autres de lire et d'apprendre plus facilement votre code.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 Schriftart an erster 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 alphabetisch 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 nicht zum Verständnis des Dokuments dienen, 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.