Prinzipien für effizienten und sauberen CSS-Code (Teil 2)

6. Angemessene Codekommentare

Codekommentare können anderen das Verständnis Ihres Codes erleichtern, und eine angemessene Organisation von Codekommentaren kann die Struktur klarer machen. Sie können am Anfang des Stylesheets ein Verzeichnis hinzufügen:

/*———————————
Zurücksetzen
2 3. Inhalt
4. Seitenleiste
———————————– */

Auf diese Weise wird die Struktur Ihres Codes klar auf einen Blick, und Sie können ihn leicht finden und ändern.

Auch der Hauptinhalt des Codes sollte sinnvoll gegliedert sein und der Code sollte bei Bedarf sogar kommentiert werden, was auch der Teamentwicklung förderlich ist:

/* ** Kopfzeile ***/

#header{height:145px;position:relative; }

#header h1{width:324px;margin:45px0020px;float:left:72px; }

/*** Inhalt ***/

#content{background:#fff;width:650px;float:left;min-height :600px;overflow :hidden;}

#content h1{color:#F00}/* Schriftfarbe festlegen*/

#content .posts{overflow:hidden; }

#content .recent{margin-bottom:20px;border-bottom:1pxsolid#f3f3f3;position:relative;overflow:hidden; }

 

/*** Fußzeile ***/

#footer{clear:both;padding:50px5px0;overflow:hidden;}

#footer h4{color:#b99d7f;font-family:Arial,Helvetica,sans-serif;font -size:1.1 em; }

7. Sortieren Sie Ihren CSS-Code

Wenn die Attribute im Code alphabetisch sortiert werden können, geht es schneller Suche nach Änderungen:

/*** Stileigenschaften sind alphabetisch sortiert ***/

div{

background-color:#3399cc ;

Farbe:#666;

Schriftart:1.2em/1.4emArial,Helvetica,sans-serif;

Höhe:300px;

Rand: 10px5px;

padding:5px010px5px;

width:30%;

z-index:10;

}

8. Halten Sie CSS lesbar

Das Schreiben von lesbarem CSS erleichtert das Auffinden und Ändern von Stilen. Ich denke, es ist selbsterklärend, welcher der beiden folgenden Fälle besser lesbar ist.

/*** Schreiben Sie eine Zeile für jedes Stilattribut ***/

div{

background-color:#3399cc;

color:# 666;

Schriftart:1.2em/1.4emArial,Helvetica,sans-serif;

Höhe:300px;

Rand:10px5px;

Auffüllung: 5px010px5px;

width:30%;

z-index:10;

}

/*** Alle Stilattribute werden in die gleiche Zeile geschrieben ** */

div{background-color:#3399cc;color:#666;font:1.2em/1.4emArial,Helvetica,sans-serif;height:300px;margin:10px5px;padding:5px010px5px;width: 30%;z-index:10; }

Wenn es um einige Selektoren mit weniger Stilattributen geht, schreibe ich eine Zeile:

/*** Selektorattribute mit weniger Attributen werden in dieselbe Zeile geschrieben ***/

div{background-color:#3399cc;color:#666;}

Für diese Regel gibt es keine feste Regel, aber egal Unabhängig davon, wie Sie ihn verwenden, rate ich Ihnen, Ihren Code immer konsistent zu halten. Wenn es viele Attribute gibt, schreiben Sie diese in separate Zeilen. Wenn weniger als 3 Attribute vorhanden sind, können Sie eine Zeile schreiben.

9. Wählen Sie bessere Stilattributwerte

Einige Attribute in CSS verwenden unterschiedliche Attributwerte, obwohl der Effekt ähnlich ist, wie z. B.

Der Unterschied besteht darin, dass border:0 den Rand auf 0 Pixel setzt. Obwohl er auf der Seite nicht sichtbar ist, rendert der Browser gemäß dem Standardwert von border immer noch border-width/border-color, also den Speicherwert besetzt.

Und border:none setzt den Rand auf „none“, was bedeutet, dass es keinen Rand gibt. Wenn der Browser „none“ analysiert, führt er keine Rendering-Aktionen aus, das heißt, er verbraucht keine Speicherwerte. Daher wird die Verwendung von border:none; empfohlen.

Ebenso wird der Wimmelbildbrowser display:none nicht gerendert und belegt keinen Speicher. Und Sichtbarkeit: verborgener Wille.

10. Verwenden Sie

Erstens gehört @import nicht zum XHTML-Tag und ist auch nicht Teil des Webstandards kompatibel mit früheren Browsern und hat einige negative Auswirkungen auf die Leistung der Website.

11. Verwenden Sie externe Stylesheets

Dieses Prinzip ist immer eine gute Designpraxis. Es ist nicht nur einfacher zu warten und zu ändern, sondern, was noch wichtiger ist, die Verwendung externer Dateien kann die Seitengeschwindigkeit verbessern, da CSS-Dateien im Browser zwischengespeichert werden können. Das in das HTML-Dokument integrierte CSS wird bei jeder Anfrage erneut mit dem HTML-Dokument heruntergeladen. Daher besteht in praktischen Anwendungen keine Notwendigkeit, CSS-Code in HTML-Dokumente einzubauen:

 

Verwenden Sie stattdessen

Vermeiden Sie die Verwendung von CSS-Ausdrücken (Ausdruck)

CSS-Ausdrücke sind eine leistungsstarke (aber gefährliche) Möglichkeit, CSS-Eigenschaften dynamisch festzulegen. Internet Explorer unterstützt CSS-Ausdrücke ab Version 5. Im folgenden Beispiel können Sie CSS-Ausdrücke verwenden, um die Hintergrundfarbe stündlich zu ändern:

background-color: expression( (new Date()).getHours()%2?"#B8D4FF":" # F08A00");

Wie oben gezeigt, wird der JavaScript-Ausdruck im Ausdruck verwendet. CSS-Eigenschaften werden basierend auf der Auswertung von JavaScript-Ausdrücken festgelegt.

Das Problem mit Ausdrücken besteht darin, dass sie häufiger ausgewertet werden, als wir denken. Nicht nur, wenn die Seite angezeigt und gezoomt wird, sondern auch, wenn die Seite gescrollt wird und sogar wenn die Maus bewegt wird, wird sie neu berechnet. Fügen Sie einem CSS-Ausdruck einen Zähler hinzu, um zu verfolgen, wie oft der Ausdruck ausgewertet wird. Sie können problemlos mehr als 10.000 Berechnungen durchführen, indem Sie einfach die Maus über die Seite bewegen.

Wenn Sie CSS-Ausdrücke verwenden müssen, denken Sie unbedingt daran, dass diese tausende Male ausgewertet werden und sich möglicherweise auf die Leistung Ihrer Seite auswirken. Vermeiden Sie daher die Verwendung von CSS-Ausdrücken, es sei denn, dies ist unbedingt erforderlich.

13. Codekomprimierung

Wenn Sie sich entscheiden, Ihr Website-Projekt im Internet bereitzustellen, müssen Sie eine Komprimierung des CSS in Betracht ziehen, um Kommentare und Leerzeichen zu entfernen und das Laden der Webseite zu beschleunigen. Um Ihren Code zu komprimieren, können Sie Tools wie den YUI-Kompressor verwenden, der den CSS-Code optimieren und die Dateigröße für höhere Ladegeschwindigkeiten reduzieren kann.

Das Obige ist der Inhalt effizienter und sauberer CSS-Codeprinzipien (Teil 2). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!